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

only_do 发布于2019-08-20 15:08 / 831人阅读

摘要：如果数据项的顺序被改变，将不是移动元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

昨天写Vue遇到个问题...代码如下
html


  
    
      {{ item }}

javascript

new Vue({
  el: "#list-demo",
  data: {
    noteContent: [1,2,3,4,5,6,7,8,9],
    nextNum: 10
  },
  methods: {
    click: function(index) {
      this.noteContent.splice(index, 1);
    }
  }
})

css

.itemlist-enter-active,
.itemlist-leave-active {
  transition: all 1s;
}

.itemlist-enter,
.itemlist-leave-active {
  opacity: 0;
}

可以把代码复制到jsfiddle运行，这样写出来的fadeout动画永远作用于最后一个元素而不是被点击元素
关键在于这句

https://cn.vuejs.org/v2/guide...
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。如果数据项的顺序被改变，Vue将不是移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

如果用index当key，v-for会重新渲染（但是不知道为什么动画一定作用于最后一个元素），所以，请保持key的唯一性，而且！不能改变！
虽然看着好像渲染出来很占位置，但是也只能这样了？

云服务器 GPU云服务器关于JAVA中顺序IO的基本操作翻转过渡动画 ios过渡动画 jquery过渡动画

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82017.html

Vue.js进入/离开&列表过度动画。

摘要：包括以下工具在过渡和动画中自动应用可以配合第三方动画库，如在过渡钩子函数中使用直接操作可以配合使用第三方动画库，如在这里，我们只会讲到进入离开和列表的过渡。不仅可以进入和离开动画，还可以改变定位。概述 Vue在插入、更新或则移除DOM时，提供多种不同方式的应用过渡效果。包括以下工具： *在CSS过渡和动画中自动应用class *可以配合第三方CSS动画库，如Animate.css *...

thekingisalwaysluc 2019-08-23 15:23 评论0 收藏0
VUE2.0学习笔记

摘要：添加事件侦听器时使用模式。只当事件是从侦听器绑定的元素本身触发时才触发回调。差别在哪里将特性名转换为从开始支持语法糖，会扩展成一个更新父组件绑定值的侦听器。如果需要条件渲染多个元素，可以使用包裹。 1.前言安装直接用引入（本地或者cdn） npm npm install vue vue-cli官方脚手架 # 全局安装 vue-cli $ npm install --glo...

pumpkin9 2019-08-23 14:38 评论0 收藏0
vue过度动画的使用方法整理

摘要：事件有效六个过度类名简单地说就是会伴随的整个过程，与存在的时长只都有一帧，所以用肉眼看与几乎是同时出现，同时消失的。未触发效果触发效果，因为所以在他之后的都上移位置发生改变未触发效果，过度开始时改变位置才有效 transition props name： - string，用于自动生成 CSS 过渡类名。例如：name: fade 将自动拓展为.fade-enter，.fade-en...

xiaolinbang 2019-08-29 15:05 评论0 收藏0
vue.js起步式（二）

摘要：当需要和第三方的动画库，比如配合时会非常有用显式声明过渡类型新增需要给过渡元素添加事件侦听器来侦听过渡何时结束。在下例中我们使用注册一个自定义的过渡元素已被插入在动画结束后调用与相同然后用特性中渐近过渡与一起用时可以创建渐近过渡。 8.方法与事件处理器方法处理器可以用 v-on 指令监听 DOM 事件： Greet 我们绑定了一个单击事件处理器到一个方法 greet。下面在...

BearyChat 2019-08-20 10:29 评论0 收藏0
Vue.js Guide Essentials-说人话-速记版

摘要：以下内容根据部分速记。同时，需要在父组件标签中添加这个属性，该属性才能传递到子组件内。把父组件传递的数据当做子组件的初始值。以下内容根据Vue.js Guide Essentials部分速记。不含动画/mixin/SSR/路由/状态管理等部分. Introduction 建议阅读原文 https://vuejs.org/v2/guide/in... 什么是Vue 开始声明式...

Sanchi 2019-08-21 18:38 评论0 收藏0