Как сделать ReactCSSTransitionGroup анимировать элементы на setState?

Question

Как сделать элементы анимированными при изменении состояния на setInterval? Попытка визуализации элементов в случайном месте и попытаться оживить изменения положения следующим образом:

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 связь со стилями: http://codepen.io/anon/pen/ZOQmJX

Он анимировать на оказание в первый раз, но не на каждом штате изменений , как его достичь?

Answer 1

componentDidMount: function() { 
    setInterval(this.shf, 777); 
} 

=>

componentDidMount: function() { 
    setInterval(()=>this.shf(), 777); 
} 

Когда SetState называется, this.state.source изменилось, но дети ReactCSSTransitionGroup узла не имеет каких-либо изменений, пять узлов с одинаковым ключом и той же последовательности.

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> 
     ); 
    } 

или изменить только

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