开发者学堂课程【Vue.js 入门与实战：动画-实现列表删除和删除时候的动画效果】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/586/detail/8171
动画-实现列表删除和删除时候的动画效果
一、 列表删除和删除时候的动画效果
本节主要实现移除的动画，在列表中，只要点击每一项，就能移除他，时最为方便的。代码如下：
<transition-group> <li v-fot=”(item,i) in list” :key=”item.id”@click=“del(i)”> {(item.id)}---{(item.name)} </li> </transition-group> methods: { add () { this.list.push({ id: this.id, name: this . name } ) this.id = this . name =’ ‘ }, del (i) { this.list. splice(i,1) } } });
返回查看效果图可以看见已经慢慢消失了，但消失时线的颜色一直跟着它，可把它取消
<style> li { border: 1px dashed #999; margin:5px; line-height:35px padding-left:5px; font-size:12px; width:100%; 加入一个属性 . v-move { （可实现元素在位移时的一些目的） transition: all 0. 6s ease ; } . v-leave-active { position: absolute }
下面的 v-move和v-leave-active配合使用，能够实现列表后续的元素,渐渐地漂上来的效果
