css - ReactCSSTransitionGroup 为表格单元格添加动画

Question

我想更新表格单元格中的值ReactCSSTransitionGroup，并在值实时更改时以可视方式显示动画，但遇到问题:表格行似乎没有更新，而多个 div 已更新显示差异:

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 元素并控制内部 tr 子元素的动画。

使用 React v0.13 工作 fiddle :http://jsfiddle.net/faria/tefxbjtL/