动画-实现列表删除和删除时候的动画效果|学习笔记

<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
}