这里主要是通过程序的执行结果验证说明文档中的内容,然后对程序做出修改
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特性更换为其它元素
网友评论