score:1

Accepted answer

looks like this is a real bug in react. checkout these github issues #3111 and #2549.

it will hopefully be fixed with version 0.14.

score:0

so, there are a few things i noticed in your js fiddle.

first, you need to reference react.addons.csstransitiongroup, not react.addons.transitiongroup. wrapping your divs in the aliased transitiongroup you have doesn't provide any functionality, and is likely causing some confusion in the reconciliation process in react.

second, you need to specify the transitionname for the csstransitiongroup, and provide specifically named css to go along with it. if you look at my example, i copied the same css that they provide in the react documentation. if you want, you can specify transitionleave or transitionenter as false, if you only want animations when items enter or leave.

last, the rest of your code is fine, but i would recommend that you render your divs based on some logic versus having them as static collections, but it also depends on what you're trying to accomplish. i hacked together a working example. not the prettiest code, but it should work for what you're after.

also, keys are immensely important. using array indices isn't the most stable thing to do, but again it depends on the situation. the keys only need to be unique among sibling elements, so in this case, it's likely ok. just know that if you see strange behavior in rendering, and you have an array of elements being rendered, the first place to look is at your keys.

js fiddle example

react docs on animation

var reactcsstransitiongroup = react.addons.csstransitiongroup;

var app = react.createclass({

getinitialstate() {
    return {
        expanded: true,
        divs: [1,2,3,4]
    }
},
render: function() {      

    var divs = [];

    if(this.state.expanded) {
          this.state.divs.map(function(div, index){
            divs.push(<div key={index}>{div}</div>);
        });                    
    } else {
        divs.push(<div key={0}>{this.state.divs[0]}</div>);
    }

    return (
        <div>
            <button type="button" onclick={this.toggleexpanded}>
                {this.state.expanded ? 'collapse' : 'expand'}
            </button>
            <reactcsstransitiongroup transitionname="example">
                {divs}
            </reactcsstransitiongroup>
        </div>
    )
},
toggleexpanded: function() {
    this.setstate({
        expanded: !this.state.expanded
    });
}
});

react.render(<app />, document.getelementbyid('container'));

Related Query

More Query from same tag