I was wondering if anyone could provide some insight about how they handle leave animations in React.js. I have been using Greensock TweenMax and the enter animations work fine on componentDidMount
, but I haven't found a reliable way to animate a component out.
My feeling is that it should go in componentWillUnmount
, but React provides no callback mechanism for you to indicate when you are ready to let go of a component. Therefore the transition animation never completes since the animations are asynchronous to React. Instead, you see a tiny fraction of a second of animation, the component disappears, and is replaced by the next component animating in.
This is a problem I have struggled with since I started using React 9 months ago. I can't help but think there has to be a solution out there other than ReactCSSTransitionGroup
which I find to be cumbersome and finicky, especially with react-router.
ReactTransitionGroup
(upon which ReactCSSTransitionGroup
is built) is the base component that allows asynchronous entering and leaving. It provides lifecycle hooks that you can use to hook into JS-based animations. The docs list the allowed hooks:
ReactTransitionGroup
is the basis for animations. When children are declaratively added or removed from it (as in the example above) special lifecycle hooks are called on them. There are 3 ways to get starting usingReactCSSTransitionGroups
:
import ReactCSSTransitionGroup from 'react-addons-css-transition-group' // ES6
var ReactCSSTransitionGroup = require('react-addons-css-transition-group') // ES5 with npm
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup; // ES5 with react-with-addons.js
componentWillAppear(callback)
This is called at the same time as
componentDidMount()
for components that are initially mounted in aTransitionGroup
. It will block other animations from occurring untilcallback
is called. It is only called on the initial render of aTransitionGroup
.
componentDidAppear()
This is called after the
callback
function that was passed tocomponentWillAppear
is called.
componentWillEnter(callback)
This is called at the same time as
componentDidMount()
for components added to an existingTransitionGroup
. It will block other animations from occurring untilcallback
is called. It will not be called on the initial render of aTransitionGroup
.
componentDidEnter()
This is called after the
callback
function that was passed tocomponentWillEnter
is called.
componentWillLeave(callback)
This is called when the child has been removed from the
ReactTransitionGroup
. Though the child has been removed,ReactTransitionGroup
will keep it in the DOM untilcallback
is called.
componentDidLeave()
This is called when the
willLeave
callback
is called (at the same time ascomponentWillUnmount
).
In order to animate a child out, you'd need to start your animation in componentWillLeave
and call the provided callback
when the animation is complete. As an example, here's a JSFiddle showing a component that stagger-animates its children in and out: http://jsfiddle.net/BinaryMuse/f51jbw2k/
The relevant code for animating out is:
componentWillLeave: function(callback) {
this._animateOut(callback);
},
_animateOut(callback) {
var el = ReactDOM.findDOMNode(this);
setTimeout(function() {
TweenLite.to(el, 1, {opacity: 0}).play().eventCallback("onComplete", callback);
}, this.props.animateOutDelay);
},