Javascript Vue.js<；过渡组>；仅在最后一个元素上应用动画

我正在练习Vue过渡组，并专门在特定部分模仿Vue文档示例

问题是，我的示例将仅在结束元素而不是正在添加/删除的元素上应用动画

有人能解释一下我做错了什么吗（谢谢

身体{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
保证金：0；
字体系列：“Nunito”，无衬线；
背景色：#101010；
颜色：白色；
文本对齐：居中；
}
.flex{display:flex；justify content:center；}
.测试输入{
不透明度：0；
转换：translateY（-20px）；
}
.测试进入{
不透明度：1；
}
.考试请假{
不透明度：0；
变换：translateY（20px）；
}
.测试进入激活状态，
.考试休假有效{
过渡：0.5s缓解；
}


洗牌
添加
去除



{{num}}
设数组=[1,2,3,4,5,6,7,8]；
新Vue({
el:“#应用程序”，
数据：{
arr:阵列
},
计算：{
arrLength（）{
返回此arr.length；
}
},
方法：{
洗牌{
警报（“尚未工作”）；
},
添加（）{
//数字从1到9。
让ranNum=Math.floor（Math.random（）*9+1）；
//获取当前数组长度的随机索引。
让ranInd=Math.floor（Math.random（）*this.arrLength）；
此.arr.splice（ranInd，0，ranNum）；
},
删除（）{
让ranInd=Math.floor（Math.random（）*this.arrLength）；
这是arr拼接（ranInd，1）；
}
}
});

只需将键改为

num

，而不是

ind

：

 <div v-for='(num, ind) in arr' :key='num' style='border: 1px solid red;'>{{ num }}</div>

{{num}

---

因为这允许转换哪个数字不是索引的动画。

Wow，谢谢！这有什么不同？分配'ind'不也会提供唯一的关键点吗？不客气，是的，ind提供唯一的关键点，但它不会跟踪添加的数字

 <div v-for='(num, ind) in arr' :key='num' style='border: 1px solid red;'>{{ num }}</div>