Vue.js中使用Lodash shuffle方法无法触发列表过渡动画

v-for绑定的key值错误，这是洗牌无过渡动画的唯一原因。
你现在用数组索引作为元素key：调用shuffle打乱数组后，每个渲染位的索引始终是0、1、2……连续排列，Vue会认为每个位置的DOM元素没动，只是里面显示的文字变了，根本不会触发.list-move对应的移动过渡。
你之前测删除元素有动画，是因为删除会改变数组长度，触发元素的进入/离开逻辑，能匹配到enter/leave的动效规则；但纯打乱顺序的场景下，索引key根本标记不了单个元素的身份，自然不会有平滑重排的效果。

把key换成列表项本身的唯一标识，重排类的列表绝对不能用数组索引当key。
如果你的data是存字母的数组（比如['a','b','c']），直接把字母本身作为key就行，改完的模板代码：

<transition-group name="list">
  <span class="letter" v-for="letter in data" :key="letter">
    {{ letter }}
  </span>
</transition-group>

如果列表项是对象，绑定对象里不会重复的字段（比如业务id）当key就可以。
你现有的洗牌逻辑、过渡样式代码不用改，改完key之后洗牌的移动动画就会正常生效。

内容的提问来源于stack exchange，提问作者krackgen