Vue中key取值会影响过渡效果和动画效果吗

这篇文章主要讲解了“Vue中key取值会影响过渡效果和动画效果吗”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Vue中key取值会影响过渡效果和动画效果吗”吧!

成都创新互联公司从2013年成立,先为唐县等服务建站,唐县等地企业,进行企业商务咨询服务。为唐县企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

关于Vue.jsv-forkey的顺序改变,影响过渡动画表现

关于Vue.jsv-forkey的取值,影响过渡动画表现这个问题是在写Message组件出现的

子组件:



  ...... ..




父组件:


  ......

JS

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

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

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

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

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

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

感谢各位的阅读,以上就是“Vue中key取值会影响过渡效果和动画效果吗”的内容了,经过本文的学习后,相信大家对Vue中key取值会影响过渡效果和动画效果吗这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!


当前文章:Vue中key取值会影响过渡效果和动画效果吗
标题来源:http://scyanting.com/article/pogjeh.html