React ReactCSSTransitionGroup 将新项目添加并动画化到列表顶部？

Question

我一直在寻找一个示例，该示例使用 React 将项目添加到列表并让它为新添加的项目设置动画，但不是在列表的末尾，而是在列表的开头。我找到了这个例子，但是我在本地和网上做过的所有乱七八糟的事情，当添加到数组的第一个位置时，我似乎无法让该项目动画化。这是一个简单的反应 todo 添加项目。如何让项目添加到第一个位置，并在第一个位置做动画？

JS Fiddle: http://jsfiddle.net/kb3gN/13152/

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

var TodoList = React.createClass({
  getInitialState: function() {
    return {items: ['hello', 'world', 'click', 'me']};
  },
  handleAdd: function() {
    var newItems =
      this.state.items.concat([prompt('Enter some text')]);
    this.setState({items: newItems});
  },
  handleRemove: function(i) {
    var newItems = this.state.items;
    newItems.splice(i, 1)
    this.setState({items: newItems});
  },
  render: function() {
    var items = this.state.items.map(function(item, i) {
      return (
        <TodoItem item={item} key={item} onClick={this.handleRemove.bind(this,     i)}/>
      );
    }.bind(this));
    return (
      <div>
        <div><button onClick={this.handleAdd}>Add new</button></div>
        <ReactCSSTransitionGroup transitionName="example">
          {items}
        </ReactCSSTransitionGroup>
      </div>
    );
  }
});

React.render(<TodoList/>, document.getElementById('list'));

Answer 1

你的问题是你添加到你的待办事项列表。如果你添加到前面，得到的动画就是你要找的。

将 handleAdd 更改为：

handleAdd: function() {
  var newItems = this.state.items;
  newItems.unshift([prompt('Enter some text')]);
  this.setState({items: newItems});
},

重点是使用unshift而不是push。浏览 mdn docs 以了解差异

React ReactCSSTransitionGroup 将新项目添加并动画化到列表顶部？

React ReactCSSTransitionGroup adding and animating new item to top of list?

animation

reactjs

reactcsstransitiongroup