31-Vue动画-列表注意点

这里主要是通过程序的执行结果验证说明文档中的内容,然后对程序做出修改
https://cn.vuejs.org/v2/guide/transitions.html#列表过渡

image.png
image.png

一.问题

目前为止，关于过渡我们已经讲到：

• 单个节点
• 同一时间渲染多个节点中的一个

那么怎么同时渲染整个列表，比如使用 v-for ？在这种场景中，使用 <transition-group> 组件。在我们深入例子之前，先了解关于这个组件的几个特点：

• 不同于 <transition>，它会以一个真实元素呈现：默认为一个 <span>。你也可以通过 tag 特性更换为其他元素。
• 过渡模式不可用，因为我们不再相互切换特有的元素。
• 内部元素 总是需要 提供唯一的 key 属性值。
  ------官方文档

简单的说,就是通过transition-group包裹的元素,浏览器的虚拟DOM会自动用span标签将其中的元素包裹起来
如果是li本身是块级元素,不适合用span这种行内元素包裹

二.解决方法

通过tag属性修改添加的包裹标签

image.png

1.把ul标签删除
2.给transition-group添加tag属性

三.注意点

1.列表过渡(动画)不能使用transition,必须使用transition-group
2.transition需要执行动画的元素不会做任何的包装
transition-group中需要执行动画的元素默认都会添加到一个审判标签中,可以通过tag特性更换为其它元素