Question

我希望更新表格单元格ReactCSSTransitionGroup中的值，并在实时更改值时直观地设置动画，但遇到问题：表格行似乎没有更新，而多个div显示discrepency：

以下是示例：

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工作小提琴：http://jsfiddle.net/faria/tefxbjtL/

ReactCSSTransitionGroup为表格单元格设置动画

1 个答案: