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
4
votes
1 answer

Where to put callback function in react-transition-group

I want to run a process only after transition has ended. Here the docs say: addEndListener Add a custom transition end trigger. Called with the transitioning DOM node and a done callback. Allows for more fine grained transition end logic. Note:…
Bens
  • 831
  • 4
  • 12
  • 28
4
votes
1 answer

Nested CSSTransitions inside another CSSTransition?

I might misunderstand this whole thing, but I'm trying to do some css animations using React and React Transition Group. But as for my code below, the exit animations wont get triggered for the nested (last) CSSTransition component. Is it not…
nickelman
  • 702
  • 6
  • 24
4
votes
2 answers

why is react-addons-css-transition-group not working here?

import CSSTransitionGroup from 'react-addons-css-transition-group' ; class VariableDefinitions extends Component { render() { const { idToVarStates } = this.props; const varHtmlList = Object.keys(idToVarStates).map(id => { return…
Natesh bhat
  • 12,274
  • 10
  • 84
  • 125
4
votes
2 answers

Animation on unmount with React and react-transition-group

I am working with React, and I'm trying to create a Fade component with React-transition-group to fade in and fade out an element depending on a condition stored in the state: http://reactcommunity.org/react-transition-group/css-transition/ This is…
user9870937
4
votes
0 answers

Multiple transitions in react-transition-group

How can I change transitions with react-transition-group (2.4.0, if it matters)? I currently have the following structure (with react-router) …
This company is turning evil.
  • 5,021
  • 5
  • 34
  • 58
4
votes
2 answers

Is there a way to use Material-UI Collapse and Drawer without Transition?

I'm using Collapse and Drawer from material-ui v1 beta to create navigation on mobile website. The navigation has many nested lists. When I click to expand/collapse a Collapse, there is noticeable delay until the Collapse start to animate. The same…
Indra
  • 78
  • 1
  • 1
  • 6
4
votes
0 answers

How does Nested Transitions work With React Transition Group

So I'm having some trouble getting nested transitions to work with ReactTransitionGroup. What I am trying to achieve is I have an off canvas menu that appears on click (which is working) then within this off canvas menu there is a list of sections…
jeanverster
  • 294
  • 3
  • 9
4
votes
1 answer

Custom React Carousel CSS for react-transition-group

I'm trying to build a custom carousel with React and the react-transition-group package. The core functionality is working, but I'm struggling to write CSS to perform a simultaneous left slide-out of old item and left slide-in of new item. Any…
lgants
  • 3,665
  • 3
  • 22
  • 33
4
votes
1 answer

React transition group - Don't animate children

I'm using react-transition-group to animate a router switch in React: …
MitchEff
  • 1,417
  • 14
  • 29
4
votes
4 answers

React Transition Group slide elements up

My current version is hiding each row, but it happens too quickly, as you can see here in my codepen. Repro by deleting the top element. I would prefer if you the events unfolded like this: Fade out Slide up I'm unsure how to do this using CSS…
Callum Linington
  • 14,213
  • 12
  • 75
  • 154
3
votes
1 answer

Unable to use css transitions

With below code I can have a transition but two issues the transition seem to be going the wrong way than what i defined (right to left instead of left to right). It is supposed to transition the old widget while the new one enters but it is…
bihire boris
  • 1,530
  • 3
  • 19
  • 44
3
votes
1 answer

How to fade one react component out, then fade another in?

I've got 2 components that are conditionally shown or hidden based on a string value stored in useState as showModal {showModal === 'SIGNIN' && } {showModal === 'JOIN' && } I want to fade in one component, then when the state…
Bill
  • 4,614
  • 13
  • 77
  • 132
3
votes
1 answer

React Transition Group: How to pass ref to mapped component to avoid Warning: findDOMNode is deprecated in StrictMode

I have the following code to render a filtered list with animated mounting/unmounting: function List({ list, templates, transition }) { return ( {list.map((item)…
TeeBoek
  • 33
  • 4
3
votes
2 answers

React v17.0.1 - How can an animation be triggered when a div comes into viewport?

I am working on a web-app which I'm building by using React.js. I want to trigger an animation when the div comes into the viewport. Currently, I am able to run the animations but the animations don't wait for the div to enter the viewport. Let us…
noob_nerd
  • 531
  • 1
  • 6
  • 21
3
votes
0 answers

No transition between exited and entering states in react transition group

I am creating a HOC that animates a bunch of child components using TransitionGroup and Transition from react-transition-group, to achieve a "fade-in" "fade-out" effect. My component looks something like this: const defaultStyle = (duration:…
Sirine Jebari
  • 31
  • 2
1 2
3
…
22 23