Animation React ReactCSTranssitionGroup将新项目添加到列表顶部并设置动画？

我一直在寻找使用react向列表中添加项目的示例，并让它为新添加的项目设置动画，但不是到列表的末尾，而是列表的开头。我找到了这个例子，但是我在本地和在线上做的所有乱七八糟的事情，我似乎无法在将项目添加到阵列中的第一个点时使其动画化。下面是一个简单的react to to add item。如何将项目添加到第一个点，并对第一个点执行动画

JS小提琴：

var reactcstransitiongroup=React.addons.cstransitiongroup；
var TodoList=React.createClass({
getInitialState:函数（）{
返回{items:['hello'，'world'，'click'，'me']}；
},
handleAdd:function（）{
var新项目=
this.state.items.concat（[prompt（'Enter some text'）]）；
this.setState（{items:newItems}）；
},
handleRemove:函数（i）{
var newItems=this.state.items；
新项目.拼接（i，1）
this.setState（{items:newItems}）；
},
render:function（）{
var items=this.state.items.map（函数（项，i）{
返回(
);
}.约束（这个）；
返回(
新增
{items}
);
}
});
React.render（，document.getElementById（'list'））；

您的问题是将您的问题添加到待办事项列表中。如果添加到前面，则生成的动画就是您要查找的动画

将

手柄D

更改为：

handleAdd:function（）{
var newItems=this.state.items；
unshift（[prompt（'Enter some text'）]）；
this.setState（{items:newItems}）；
},

---

关键是使用

unshift

而不是

push

。浏览以了解差异

我这样做，数组在开始时按您的需要添加，但转换仍然发生在最后一项，就像您有

['1'，'2'，'3']

和您

取消移位（'0'）一样

它将在开始时添加

0

，但

3

始终具有转换效果。