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

334 questions
2
votes
2 answers

React-Transition-Group add a delay before the *-enter class is added

I am trying to use react-transition-group to animate the entry/exit of two components. The Transitions are working fine, but the only issue is that when *-exit is fired for the exiting component, the other component also enters the DOM and the…
Vijay Venugopal Menon
  • 1,510
  • 1
  • 14
  • 20
2
votes
1 answer

CSS transition width not working with flex

Layout:
<--- conditional
CSS: .sideBarContainer { …
Arthur
  • 2,622
  • 4
  • 28
  • 46
2
votes
1 answer

Change react-transition-group exit animations depending on user interaction?

I'm fairly new to React and react-transition-group. I'm making a very simple app that displays a word of the day, and I'm having some trouble with animating my info cards. It essentially works like an image carousel. If the user clicks a left arrow,…
georgedum
  • 491
  • 3
  • 10
2
votes
1 answer

React CSSTransition between sub routes

App Component: …
mysterious
  • 1,450
  • 5
  • 29
  • 56
2
votes
1 answer

react-transition-group CSSTransition, conditional with null

Trying to get a simple fade in/out transition working. I've tried moving the around into different areas to no avail. I'm using this successfully in another component that's mapping children but can't see why it wouldn't work in…
raccoon_nine
  • 43
  • 1
  • 8
2
votes
1 answer

How to animate exit with react-transition-group

I am using react-transition-group to create a modal that pops into view. const AnimatedModal: SFC = (props: AnimatedModalProps) => (
Robert Lemiesz
  • 1,026
  • 2
  • 17
  • 29
2
votes
0 answers

How to use react-router and have different types of animations (or none) with react-transition-group

I've used React Router's own animation example as a starting point and gotten a simple always-fade-in animation working. Problem is, that setup is way too simplistic, and I require anything from no transition at all to an arbitrary amount of…
Tomm Huth
  • 215
  • 2
  • 10
2
votes
0 answers

React Transition Group Rolling Chat

In my app I have a speech bubble that has rolling text controlled by redux. Using the animate css library, I am trying to have the text fade in up when it comes in and fade out down when the text changes. Right now I have something like…
user2465134
  • 8,793
  • 5
  • 32
  • 46
2
votes
2 answers

Next.js page transition

I'm using the new _app.js file for Next.js to try and create a page transition such as a fade or slide but can't get my head around it. I'm using Styled Components to apply the styling. My structure looks like this currently: _app.js import App, {…
CaribouCode
  • 13,998
  • 28
  • 102
  • 174
2
votes
0 answers

React transition group using gsap, Exiting and Exited not being called

I'm trying to use gsap for the animations and want to call these on the functions provided. Entering ones work but can't get the exiting and exited ones to fire. i'm setting a state variable on click to change in to false but its not rerendering. Am…
Adam
  • 1,136
  • 8
  • 26
  • 51
2
votes
1 answer

Animation CSSTransition React

Using CSSTransition component and React I want to apply a Fade In animation here you can find a small example what I want to achieve: https://codesandbox.io/s/j75712qjvy On first load time text is faded in but never again when some of the buttons…
Vicens Fayos
  • 740
  • 1
  • 5
  • 18
2
votes
1 answer

react-transition-group/react-router jumps to top of window on route change

https://www.wealthsimple.com/en-ca/culture/ If you're scrolled any amount on an interior page and you navigate to another it quickly jumps to the top of the page and then does page transition. I have transition-container as pos:ab. Any ideas why…
Devin Chaves
  • 175
  • 2
  • 11
2
votes
0 answers

CSSTransition height animation and double code

having trouble figuring out how can i fix issue with animating height or fixing duplicated code Ideally i would have someting like this, but the problem with this approach is, when editMode is false wrapping div doesn't exist any more, if i…
Zeljko Marinkovic
  • 55
  • 6
2
votes
1 answer

Transitioning between two components tied to a stateful value

Using React Transition Group v2, I want to be able to smoothly transition between an element of text and a loading spinner. Without any CSSTransitionGroup element, I have the following code: {isFetchingEvents ? ( ) : ( …
alanbuchanan
  • 3,993
  • 7
  • 41
  • 64
2
votes
1 answer

Create custom transition in Material UI Next

I wanted to use the fade transition to show an overlay with a loading animation but the fade component only handles opacity and the element is still there. I want to create a custom animation to make sure that the overlay element is not rendered on…
Jordan
  • 2,393
  • 4
  • 30
  • 60
1 2 3
…
22 23