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
).
Animation – Low-level API
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);
},