ReactCSSTransitionGroup анимировать ячейки таблицы

Question

Я хотел бы обновить значения в ячейках таблицы ReactCSSTransitionGroup и визуально визуализировать, когда значение изменяется в режиме реального времени, но с проблемами: строки таблицы, похоже, не обновляются, а несколько разделов имеют разницу в показаниях:

http://jsfiddle.net/jj0byzz0/33/

Вот пример:

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup; 

var AniTest = React.createClass({ 
render: function() { 
    var content = this.state.numbers.map(function(number){ 
     return (
      <tr key={number}>  
      <td> 
      <ReactCSSTransitionGroup component="div" transitionName="aninumber" >    
       <div key={number}>{number}</div> 
      </ReactCSSTransitionGroup> 
      </td> 
      </tr> 
     ) 
    }); 

    return (
      <div> 
      <ReactCSSTransitionGroup transitionName="aninumber" >    
       <div key={this.state.numbers[0]}> {this.state.numbers[0]} </div> 
       <div key={this.state.numbers[1]}> {this.state.numbers[1]} </div> 
       </ReactCSSTransitionGroup> 
       <br/> 
       Table Animation 

       <table > 
        <thead> 
         <tr> 
         <th>#</th> 
         </tr> 
        </thead> 
        <tbody> 
         {content} 
        </tbody> 
       </table> 
      </div> 
    ) 
}, 

componentDidMount: function(){ 
    setInterval(this.updateNumbers, 5000); 

}, 

updateNumbers: function() { 

    this.setState({numbers:[Math.floor(Math.random() * 1000), Math.floor(Math.random() * 1000)]}); 

}, 

getInitialState: function(props){ 
    return { 
     numbers:[1,2] 
    }; 

} 
}); 

React.render(<AniTest/>, document.getElementById("anitest")); 

и CSS:

.aninumber-enter { 
    background-color: green; 
    transition: background-color .5s ease; 
} 

.aninumber-enter.aninumber-enter-active { 
    background-color: transparent; 
} 

.aninumber-leave { 
    background-color: transparent; 
    transition: background-color .5s ease; 
} 

.aninumber-leave.aninumber-leave-active { 
    background-color: green; 
} 

Answer 1

Не вставляйте несколько тегов CSSTransitionGroup внутри своей переменной содержимого. Вместо этого удалите явное TBODY тег, и заменить:

<ReactCSSTransitionGroup component="tbody" transitionName="aninumber"> 
{content} 
</ReactCSSTransitionGroup> 

Этот сингл TransitionGroup оказывает как TBODY элемент и контролирует анимацию т.р. детей внутри.

работает скрипка с помощью React v0.13: http://jsfiddle.net/faria/tefxbjtL/