CODEWITHSUNDEEP
cssanimationreactjs
Franklin Noel
Franklin Noel

Reputation: 109

ReactTransitionGroup Lower Level API

Im really new to React and animation and I am trying to animate my components with ReactTransitionGroup and I am not quite sure how to do it. None of the ReactTransitionGroup lifecycle methods (componentWillAppear or ComponentDidAppear) are being called.

var React = require('react');
var ReactTransitionGroup = require('react-addons-transition-group');

var App = React.createClass({
render: function(){
    return (

        <div> 
            <h3>Type in the box below to watch it change color.</h3>
            <div>
            <ReactTransitionGroup component={List}>
            {this.props.children}
            </ReactTransitionGroup>
             </div>
        </div>
        );
}

});

var List = React.createClass({
componentWillAppear: function(callback){
    console.log('componentWillAppear');
    setTimeout(callback, 1);
},
componentDidAppear: function(){
    console.log('componentDidAppear');
},

componentWillLeave: function(callback){
    console.log('componentWillLeave');
},
componentDidLeave: function(){
    console.log('componentWillLeave');
},
render: function(){
    return <div>{this.props.children}</div>
}

});

module.exports = App;

why aren't these ReactTransitionGroup hooks being called?? Please help.

Upvotes: 1

Views: 1229

Answers (2)

Elise Chant
Elise Chant

Reputation: 5196

children need a key

change: 

{this.props.children}

to: 

{React.cloneElement(this.props.children, {
    key: Math.random()
})}

Do your testing rendering hard coded content in List, try:

render: function(){ return Hello world }

Also, ReactTransitionGroup takes propeties, you might be looking for an "appear" transition like documented here: https://facebook.github.io/react/docs/animation.html#getting-started

Upvotes: 0

enjoylife
enjoylife

Reputation: 3861

Your problem is your attaching the life cycle methods to your custom component which is the Parent of the animating children. From the docs:

When children are declaratively added or removed from it (as in the example above) special lifecycle hooks are called on them.

So it's the {this.props.children} which are expecting the life cycle methods, not List.

Upvotes: 2

Related Questions