下载安装animation.css;
在目标元素外使用标签transition,如果只有一个元素,则使用transition,多个元素需要使用transition-group;
在animation官网里面我们可以看到对应的使用方法;
1.transition 只能满足单个节点的过渡效果,在多个节点的处理过程无法使用,vue 提供 transition-ground来多个元素的过渡。
2.transition-group 拥有transition所有属性
transition本身不会渲染出元素,但是transition-group 会渲染出元素节点;
3. 1)在实现列表过渡的时候,如果需要过渡的元素,是通过 v-for 循环渲染出来的,不能使用 transition 包裹,需要使用 transitionGroup
2) 如果要为 v-for 循环创建的元素设置动画,必须为每一个 元素 设置 :key 属性
3)通过 为 transition-group 元素,设置 tag 属性,指定 transition-group 渲染为指定的元素,如果不指定 tag 属性,默认,渲染为 span 标签
<li v-for="(item,i) in list" :key=“item.id” @click=“del(i)”>
{{item.name}}
但是当我们把将transition标签改成transition-group标签之后,发现控制台里依然有错误提示—当transition-group里有多个元素时,需要给每个元素设置key值,并且每个key值是不能一样的。设置完后,页面就恢复正常了