javascript - how to make ReactCSSTransitionGroup animate elements on setState? -

how make elements animate on changing state setinterval ? trying render elements in random position , try animate position changes following:

    var elem = react.createclass({         render: function () {             return (                 <h1 classname="elem">                     hello, {this.props.name} !                 </h1>             );         }     });       var maincontainer = react.createclass({         componentdidmount: function () {             setinterval(this.shf, 777);         },         getinitialstate: function () {             return {source: []};         },         shf: function () {             var source = this.props.source.sort(function () {                 return .5 - math.random();             });             this.setstate({                 source: source             });         },          render: function () {             var reactcsstransitiongroup = react.addons.csstransitiongroup;             var elems = this.state.source.map(function (elem, i) {                 return (                     <reactcsstransitiongroup key={i * 10}                                              transitionname="example"                                              transitionappear={true} transitionappeartimeout={500}                                              transitionenter={true} transitionleave={true}>                         <elem key={i} number={i} name={elem}/>                     </reactcsstransitiongroup>                 );             }, this);             return (                 <div>                     {elems}                 </div>             );         }     });     reactdom.render(<maincontainer source={["bill", "bob", "sam", "john", "smith"]}/>,         document.getelementbyid('container')); 

codepen link styles : http://codepen.io/anon/pen/zoqmjx

it animating on rendering first time but, not on every state changes, how achieve ?

componentdidmount: function () {    setinterval(this.shf, 777); } 

=>

componentdidmount: function () {    setinterval(()=>this.shf(), 777); } 

when setstate called,this.state.source has changed,but children of reactcsstransitiongroup node has no change,five node same key , same sequence.

render: function () {         var reactcsstransitiongroup = react.addons.csstransitiongroup;         var elems = this.state.source.map(function (elem, i) {             return (                     <elem key={elem} number={i} name={elem}/>             );         }, this);         return (             <reactcsstransitiongroup                                          transitionname="example"                                          transitionappear={true} transitionappeartimeout={500}                                          transitionenter={true} transitionleave={true}>                 {elems}             </reactcsstransitiongroup>         );     } 

or change

<elem key={elem} number={i} name={elem}/>