<transition-group>可以对列表项增加或删除时候加入过度动画,用法是使用<transition-group>代替外层标签,
可以写成这样<transition-group name="list" tag="ul"> name为加载过度css时的名称,tag为代替的标签名
接下来在css中加上进入前、离去后的css,和过渡css就可以实现过渡动画
.list-enter-active, .list-leave-active {
transition: all 1s;
}
.list-enter, .list-leave-to{
opacity: 0;
transform: translateY(30px);
}
需要格外注意的是在内层li中必须加上key属性,而且key属性不能为v-for循环中的index,可以为item.id item.name之类,不然你的过渡css总会加载在最后一个列表项上!!