Javascript 为什么Vue在替换、创建和删除阵列项目时会以不同的方式设置动画？

当点击“流”按钮时的动画与点击JSFIDLE bellow中的“随机流”按钮后的动画不同时，我遇到了转换问题

也许我的造型有问题，但我不明白为什么我仍然喜欢流行为

我需要div数组的“流随机”行为

多谢各位

newvue({
el:'列出完整的演示'，
数据：{
项目：[1,2,3,4,5,6,7,8,9]，
下次：10
},
方法：{
添加：功能（项目）{
this.items.splice（this.items.length，0，item）
},
删除：函数（）{
返回此.items.splice（0,1）[0]
},
流：函数（）{
this.add（this.remove（））
},
streamrnd：函数（）{
this.add（this.nextNum++）
这个。删除（）
}
}
})

。列出完整的项目{
过渡：所有1；
显示：内联块；
右边距：10px；
边框：1px纯绿色；
填充：10px 10px 10px 10px；
}
.innerDiv{
边框：1px纯红；
}
.列表完成输入{
不透明度：0；
转换：translateX（40px）；
}
.列出完整的假期{
不透明度：0；
转换：translateX（-40px）；
}
.列出完整的活动假期{
位置：绝对位置；
}

流动
流随机
{{item}}

在stream函数中，将删除的元素添加回数组中。因此，动画会将其从末端移动到起点

---

在streamrnd函数中，您只需完全删除它，然后添加一个新的。因此它会相应地设置动画。

您已经通过项目本身为过渡元素设置了关键帧，这是一个数字

单击流按钮时，将从数组中删除最后一项并将其插入到数组的开头。由于该项的键相同，Vue检测到该项已在数组中移动，并将其转换为相同的键

单击“随机流”按钮时，将从数组中删除最后一个项，并插入一个新的唯一项，该项的键与DOM中现有项的键不同。Vue将对删除的项目执行休假转换，并对新项目执行输入转换

您需要使用来控制Vue如何为项目重用DOM元素

您可以为数组中的每个项目关联一个唯一的数字键，以防止Vue重用跨距：

{{item.value}

数据：{
项目：[
{键：1，值：1}，
{键：2，值：2}，
{键：3，值：3}，
{键：4，值：4}，
{键：5，值：5}，
{键：6，值：6}，
{键：7，值：7}，
{键：8，值：8}，
{键：9，值：9}，
],
下一次：10，
下一个键：10
},
方法：{
添加（项目）{
此.items.splice（0,0{
key:this.nextKey++，
值：isNaN（项目）？此.nextNum++：项目，
})
},
删除（）{
返回this.items.splice（this.items.length-1,1）[0].value
},
流（）{
this.add（this.remove（））
},
streamrnd（）{
this.add（this.nextNum++）
这个。删除（）
}
}

显然，您可以简化代码，但您已经明白了

---

.

嗨，谢谢你的反应，我知道我在代码中做什么。我只是想更深入地了解那里发生了什么。你好，谢谢你，这正是我想要的。