React ReactCSSTransitionGroup如何将新项添加到列表顶部并实现动画效果？

Question

我一直在寻找一个关于如何在React中向列表添加项目并对新添加的项目进行动画处理的例子，但是不是将其添加到列表末尾，而是添加到列表开头。我发现了这个例子，但是无论我在本地还是在线上尝试，我似乎都不能使项目在数组的第一个位置时执行动画。以下是一个简单的React待办事项添加项目的示例。我该如何将项目添加到第一个位置，并对第一个位置进行动画处理？

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

- Chipe

Answer 1

您的问题是添加到待办事项列表时的附加操作。如果您在前面添加，那么得到的动画效果就是您想要的。

将handleAdd更改为：

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

关键点是使用unshift而不是push。请浏览MDN文档了解它们之间的区别。

- enjoylife

---

我这样做，数组会按照你想要的添加到开头，但是转换仍然发生在最后一个项目上，例如如果你有['1', '2', '3']并且你使用unshift('0')，它会在开头添加0，但是3始终是具有过渡效果的那个。 - Johhan Santana