动画-实现列表删除和删除时候的动画效果
一、 列表删除和删除时候的动画效果
本节主要实现移除的动画，在列表中，只要点击每一项，就能移除他，时最为方便的。代码如下：
<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配合使用，能够实现列表后续的元素,渐渐地漂上来的效果
