Wie man ReactCSSTransitionGroup animiert Elemente auf setState?

Question

Wie können Elemente animiert werden, wenn sich der Status durch setInterval ändert? Der Versuch, Elemente in zufälliger Position zu machen und versuchen, Positionsänderungen zu animieren, wie folgend:

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 Verbindung mit Stile: http://codepen.io/anon/pen/ZOQmJX

Es ist auf Rendern das erste Mal, Animieren, aber nicht auf den jeder Staat Änderungen , wie erreiche ich das?

Answer 1

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

=>

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

Wenn setState genannt wird, hat this.state.source geändert, aber die Kinder von ReactCSSTransitionGroup Knoten hat keine Änderung, fünf Knoten mit dem gleichen Schlüssel und derselben Sequenz.

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

oder nur

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