关于Vue.js的vfor，key的顺序改变，影响过渡动画表现

关于Vue.js的v-for&＃xff0c;key的顺序改变&＃xff0c;影响过渡动画表现
这个问题是在写Message组件出现的&＃xff0c;先看代码部分

子组件&＃xff1a;

#Notice&＃xff1a;........

#JS:
methods: {enter(e) {e.style.height &＃61; e.scrollHeight &＃43; "px";},leave(e) {e.style.height &＃61; 0;}}#CSS:
transition: all .2s ease-in-out;

父组件&＃xff1a;

......

JS&＃xff1a;
data() {return {notices: []};},
......
#notices 新增的时候自动加入定时器来移除setTimeout(()&＃61;>{let index &＃61; 0 //这里假设我已经取得了移除的 index索引,可能不是依次的123456this.notices.splice(index, 1);
},time) //time 为传入的随机不等值

理论上当某一个 子组件被移除时&＃xff0c;他会有一个流畅的高度从 1到0 到过度动画&＃xff0c;但是不然&＃xff0c;每次移除时 &＃xff0c;动画每次只会应用到最后一个。百思不解&＃xff0c;各种js &＃xff0c;css 实现都不是很理想。依然一卡一卡的。

又去官网把文档翻了一遍。 找出了问题所在。for 遍历的时候&＃xff0c;有一个值很重要 &＃xff1a;key

当key取值为 Number 时&＃xff0c;每次数组被改变&＃xff0c;dom会重新渲染&＃xff0c;所以动画每次 只会影响最后一个。

当key取值为 String 时&＃xff0c;每次数组被改变&＃xff0c;dom则默认用“就地复用”策略&＃xff0c;

所以把key 改为 String 时&＃xff0c;则就是我想要当结果&＃xff0c;流畅的依次性的执行了动画&＃xff0c;完美
官网的例子 https://cn.vuejs.org/v2/guide/list.html#key

这里需要注意的是&＃xff0c;key的取值为String&＃xff0f;Number&＃xff0c;所以测试时key值为了避免不重复&＃xff0c;应该取值为随机的不重复 string

[完]