Lifecycle Animation Responses

Question

I am trying to find a way to perform animation depending on the ReactElement life cycle, it is quite easy to make an animation when the component has just been installed, but I would do one more before unmounting the component.

I cannot use ReactCSSTransitionGroup because it will not use RequestAnimationFrame.

Just to describe my case a bit, my component is a sidebar that I can turn on / off depending on some user inputs.

var Sidebar = React.createClass({ componentDidMount: function() { var menuUfeWidth = $('.menu-ufe').width(); $(this.getDOMNode()).transition({x: menuUfeWidth}, Utils.animationDuration * 2, 'snap'); }, render: function() { return ( <div className={'leaflet-sidebar left'}> <div className={'ufe-content'} /> </div> ); } }); 

I am wondering how you would pave your way to be able to animate before disabling the component.

Answer 1

ReactCSSTransitionGroup is the only specialized version of ReactTransitionGroup that calls componentWillEnter , componentDidEnter , componentWillLeave and componentDidLeave based on your specific CSS.

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

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

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