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

334 questions
3
votes
2 answers

CSSTransition Component

I want to animate (fade-in) a div at or after the initial mounting of a component. After the animation is done, the div shouldn't disappear. I am trying to use CSSTransition component and looking examples on reactcommunity.org but I couldn't achieve…
TToprak1
  • 349
  • 4
  • 15
3
votes
0 answers

TransitionGroup Warning: componentWillMount has been renamed, and is not recommended for use

I use the latest version "react-transition-group": "^4.3.0", but these warings still appear, how to get rid of them?
Стас Рябцев
  • 1,318
  • 4
  • 19
  • 36
3
votes
1 answer

Trouble with CSS transition, absolute positioning, and React Transition Group

I'm working on some basic FreeCodeCamp challenges, and I'm trying to use React Transition Group to achieve some pretty simple animations. Here's the CodePen. What I've run in to is that I can't find out how to have the "quote card" horizontally and…
Gus Murphy
  • 318
  • 3
  • 11
3
votes
0 answers

Getting the "JSX element type 'Component' does not have any construct or call signatures.ts(2604)"

I am working on an internal software for my company, and my supervisor wants a clean up the the sharp transition that usually occurs with react-router. What I found was react-transition-group. I added it to my project, and attempted to copy what was…
3
votes
1 answer

How to prevent component from unmounting immediately when using React Router V4

I am using react-transition-group's tag to create animations between routes using react-router-v4. I am using tags to switch between routes in my code based off of changes in state. The issue that I am running into is, when a is triggered, the…
3
votes
1 answer

What am I'm missing for React Transition Group Component when using it to build a carousel?

I just would like to have my opacity change between images.I'm building a Carousel and once you click on the icons the images change. I believe I'm missing the either an attribute or two or the logic and method I'm using it is in correct but I can't…
justkeithcarr
  • 1,027
  • 1
  • 7
  • 13
3
votes
0 answers

React - Using react-transition-group TransitionGroup in Nested Routes

I searched this issue but I could not find a solution with native react-transition-group. I have 2 components Home and Order. I use route transition for these. Everything works fine for these flat routes.
3
votes
1 answer

Animate the show / hide of table rows in React

I have seen the examples of ReactTransitionGroup. In those examples, we are animating new and deleted table rows of a todo list. The animation shown in the example is a fade animation. How do I expand / shrink the table row instead of fade…
vijayst
  • 20,359
  • 18
  • 69
  • 113
3
votes
2 answers

How do I transmit a state to a parent component when clicking a react-router Link?

I want to build a single page application that works with transitions, that would look like follows: *------*--------------*-----------* | | | | | Shop | Landing Page | Biography | | | | …
Jaeger
  • 1,686
  • 1
  • 30
  • 50
3
votes
3 answers

CSSTransition from react-transition-group does not exit

Trying to get used CSSTransiction component. I need to show a panel which is animated by using css-classes. The first class defines the primary location, the second defines position when the panel is opened (top: 0). Appearing is working, but…
podeig
  • 2,597
  • 8
  • 36
  • 60
3
votes
1 answer

React - Is there is a difference between TransitionGroup / ReactCSSTransitionGroup / CSSTransitionGroup

So I cannot figure out why people like to call the React Transition Functions in the different ways by TransitionGroup: import TransitionGroup from 'react-transition-group/TransitionGroup' ReactCSSTransitionGroup import ReactCSSTransitionGroup…
Sviat Kuzhelev
  • 1,758
  • 10
  • 28
3
votes
1 answer

React Router throwing redirect warnings with TransitionGroup

I am using React Router with React Transition Group to animate between routes. I have a problem when I use a component. The App works, but I get multiple warnings from React Router that reads: Warning: You tried to redirect to the same…
Steve R
  • 90
  • 5
3
votes
0 answers

how to properly use ReactTransitionGroup

I'm trying to use React's TransitionGroup and Transition elements to implement the basic case of having my elements 'animate' in and out. I'm confused about the proper way to utilize the Entering, Entered, Exiting, Exited state as well as…
Alex Bollbach
  • 4,370
  • 9
  • 32
  • 80
3
votes
2 answers

How to animate svg picture after a button click in React

I'm building a simple App in react. And I'm trying to change an svg fill color when I click on like button. I've researched around and many developers use React Transition Group as a way, but I'm having hard time understanding how it works in this…
Ndx
  • 517
  • 2
  • 12
  • 29
3
votes
1 answer

Reactjs Warning: Unknown props `onExited`, `appear`, `enter`, `exit` on
  • tag
  • I'm following Wes Bos's Reactjs video. In his 22nd video, he is teaching how to use CSSTransitionGroup to do animation. I found it's deprecated so I installed the latest lib: react-transition-group . I found the CSSTransitionGroup is deprecated…
    Franva
    • 6,565
    • 23
    • 79
    • 144