浅谈Vue中v-for，key取值影响过渡效果和动画效果（代码详解）

之前的文章《教你怎么使用Vue实现动画效果（附代码）》中，给大家介绍了怎么使用Vue实现动画效果。下面本篇文章给大家了解一下浅谈Vue中key取值影响过渡效果和动画效果，有需要的朋友可以参考一下，希望对你们有帮助。

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

关于Vue.js的v-for，key的取值，影响过渡动画表现这个问题是在写Message组件出现的，先看代码部分

子组件：

<!-- Notice： --> <transition :name="transitionName" @enter="enter" @leave="leave">   ...... .. </transition> <!-- JS: --> <script>   export default {     methods: {       enter(e) {         e.style.height = e.scrollHeight + "px";       },       leave(e) {         e.style.height = 0;       },     },   }; </script> <!-- CSS: --> <style>   transition: all 0.2s ease-in-out; </style>

父组件：

<notice v-for="(item, index) in notices" :key="index">   ...... </notice>

JS：

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

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

又去官网把文档翻了一遍。 找出了问题所在。for遍历的时候，有一个值很重要：key当key取值为Number时，每次数组被改变，dom会重新渲染，所以动画每次只会影响最后一个。

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

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

这里需要注意的是，key的取值为String／Number，所以测试时key值为了避免不重复，应该取值为随机的不重复string/number, 不要使用默认的index 。

[完]

推荐学习：JavaScript视频教程