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

邱秋2年前 10:56
关于Vue.js的v-for,key的顺序改变,影响过渡动画表现

关于Vue.jsv-forkey的取值,影响过渡动画表现 这个问题是在写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 到过度动画,但是不然,每次移除时 ,动画每次只会应用到最后一个。百思不解,各种jscss实现都不是很理想。依然一卡一卡的。

又去官网把文档翻了一遍。 找出了问题所在。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

[完]

本文于2年前 10:56发布在[code]分类下,当前已被围观2504次

相关标签:vue

永久地址:https://www.chuchur.com/article/vue-v-for-transition

版权声明:自由转载-署名-非商业性使用