React lifecycle animations React lifecycle animations reactjs reactjs

React lifecycle animations


ReactCSSTransitionGroup is just a specialized version of ReactTransitionGroup that calls componentWillEnter, componentDidEnter, componentWillLeave, and componentDidLeave based on your defined CSS.

If you don't want to use CSS animations, you can simply use ReactTransitionGroup and use a component that implements these lifecycle hooks using RAF-based animations:

<ReactTransitionGroup component="div">  <MyCustomReactTransitionComponent key={...} /></ReactTransitionGroup>

Here's an example I found from another SO post: http://jsbin.com/jebumipimo/1/edit?html,console,output