Stack Overflow
Stack Overflow

Questions tagged [react-transition-group]

Exposes simple components useful for defining entering and exiting transitions. React Transition Group is not an animation library like React-Motion, it does not animate styles by itself. Instead it exposes transition stages, manages classes and group elements and manipulates the DOM in useful ways, making the implementation of actual visual transitions much easier.

Website / Docs

https://reactcommunity.org/react-transition-group/

Syntax

<CSSTransition in={inProp} timeout={200} classNames="my-node">
  <div>
    {"I'll receive my-node-* classes"}
  </div>
</CSSTransition>

Demo

https://codesandbox.io/s/thirsty-pasteur-m77l2vp00x?from-embed

285 questions
10
votes
4 answers

page sliding animation with React Router v4 and react-transition-group v2

I'm using React Router v4 and react-transition-group v2 to test the page sliding animation. const RouterMap = () => (
jason
  • 165
  • 2
  • 12
9
votes
2 answers

@types/react-transition-group: Generic type 'ReactElement' requires between 1 and 2 type arguments.ts(2707)

I've just got hit with this one. Turns out that in the file node_modules/@types/react-transition-group/TransitionGroup.d.ts There is this type: type TransitionGroupProps = …
danielrvt
  • 8,650
  • 14
  • 65
  • 110
8
votes
2 answers

How can I make `react-beautiful-dnd` not trigger a `react-transition-group` animation?

Video demonstrating my issue: https://i.imgur.com/L3laZLc.mp4 I have a simple app where you can add Cards to 2 different Rows. When a card is added to a row, I'm using react-transition-group to trigger an "enter" animation. However, I also have…
damon
  • 1,937
  • 6
  • 18
  • 30
8
votes
1 answer

Exit delay animation in react-transition-group

I am using react-transition-group in a ReactJS and GatsbyJS (V2) project. I have my page transitions working with animation but when Link exit, the exiting animation is cut short because the next page is ready for entering. I have tried delaying…
Darren
  • 1,591
  • 4
  • 24
  • 66
8
votes
1 answer

page transitions without React-Router

This should be so simple, but I've been breaking my head over this for days. I'm trying to animate my page transitions. The problem is the docs SUCK. I've followed them over and over and tried every which way, but can't get it to work. What I…
Coco
  • 1,114
  • 15
  • 37
8
votes
2 answers

How to use a different delay for each item with React transition group?

I am animating the entry and exit of an array of items using TransitionGroup and CSSTransition (with a fade effect). I would like the items to appear with a slight delay between them instead of all at the same time. Note that the delay can be lower…
nbeuchat
  • 4,802
  • 2
  • 28
  • 37
7
votes
2 answers

Element values shifting and changing before transition with react-transition-group

I noticed this behavior while using the react-transition-group package in a gatsby project I'm working on. I have a list of "tags" that are added to an active list as they are picked from another master list. Clicking a tag from the master list adds…
Shnibble
  • 110
  • 1
  • 10
6
votes
1 answer

Using React, findDOMNode is deprecated in StrictMode is thrown as a warning when using react-transition-group

I'm using the package react-transition-group, I have tried using the nodeRef props on the CSSTransition component, and added a wrapper on my component but I still get the warning regarding findDOMNode. Here's the code:
Randel Ramirez
  • 3,393
  • 19
  • 43
  • 60
6
votes
1 answer

Animating route transitions with CSSTransitionGroup and React-Router v6

I'm starting to use React-Router v6, and running into issues animating route transitions. Both the react-router docs and the react-transition-group docs specify ways that are not compatible with the new v6 api. The primary reason seems to be the…
T_Conroy
  • 4,380
  • 9
  • 43
  • 92
5
votes
2 answers

React: Calling Render() during animation. What happens?

I want to know how React handles a Render that is called during a component's animation. In the below example, a component is rerendered Say there is a state change to the component during the component's animation, and so the component is…
michael_fortunato
  • 72
  • 9
5
votes
1 answer

React Router + Animation libraries problems: components won't animate before unmounting with react-router-dom

I have the following code: import React from "react"; import { BrowserRouter, Route, NavLink } from "react-router-dom"; import { AnimatePresence, motion } from "framer-motion"; import Hi from "./Hi"; import Something from "./Something"; import…
Herman
  • 263
  • 3
  • 8
5
votes
1 answer

How to define state when using `history.goBack()`

I've created some animations that I'd like to use for navigating between routes in my application. I have a back button visible on certain pages that allows the users to pop off the navigation stack to access the most recent page. I'd like two…
Gabe O'Leary
  • 1,779
  • 4
  • 21
  • 38
5
votes
1 answer

Working from a 2017 react-router react-transition-group example where content components don't render

The demo and code => https://codesandbox.io/s/73ymn2k911 Based on my observations through dev tools, it initially knows where to place components but forgets to set opacity: 1 or remove the old components I suspect the issue lies in app.js See…
Tom Chapman
  • 358
  • 3
  • 15
5
votes
2 answers

TransitionGroup and CssTransition: Exit transition not applied

I migrated from the old CSSTransitionGroup to the new react-transition-group CSSTransition and TransitionGroup. I'm creating (hacking) an overlay loader and I'm trying to apply animation to the overlay when it appears and disappears. Specifically…
Leonardo
  • 3,356
  • 2
  • 37
  • 72
1
2 3
…
18 19