Vue <transition-group> 组件使用

[jtwang7]

Vue 组件使用

参考文章：

• transition-group 列表过渡

✅ 作用 渲染整个列表 (比如使用 v-for 生成的列表)。为了让整个列表组件间的变化以动画形式呈现，在这种场景中，使用 <transition-group> 组件。

🔆 <transition-groupo> 的几个特点：

1. 不同于 <transition>，它会以一个真实元素呈现：默认为一个 <span>。你也可以通过 tag attribute 更换为其他元素。
2. 过渡模式不可用，因为我们不再相互切换特有的元素。
3. 内部元素总是需要提供唯一的 key attribute 值。
4. CSS 过渡的类将会应用在内部的元素中，而不是这个组/容器本身。

✅ 使用注意事项

1. <transition-group> 是一个真实的元素，不单单是个无呈现实体的包裹容器
2. <transition-group> 的子元素应当直接包裹待渲染的所有列表元素，否则动画效果不能生效。(因为 CSS 过渡类应用于下一级元素，但无法影响到深层目录结构)