内置组件-TransitionGroup

合集 - vue文档重点摘要(20)

1.vue基础（易遗漏点）2023-11-132.props2023-12-073.emit事件2023-12-074.组件v-model2023-12-115.vue透传 Attributes2023-06-276.依赖注入2023-12-117.异步组件与Suspense2023-12-118.组合式函数hook2023-12-259.自定义指令2023-12-2510.vue插件2023-12-2711.内置组件-Transition2023-12-27

12.内置组件-TransitionGroup2023-12-27

13.内置组件-Teleport2023-12-2714.vue服务端渲染2023-12-2815.render函数与h函数2023-12-2816.常用API2024-01-0217.生命周期钩子2024-01-0718.内置指令2024-01-0719.特殊元素2024-01-0720.defineExpose2024-01-07

收起

介绍

<TransitionGroup> 是一个内置组件，用于对 v-for 列表中的元素或组件的插入、移除和顺序改变添加动画效果。

和 <Transition> 的区别​

<TransitionGroup> 支持和 <Transition> 基本相同的 props、CSS 过渡 class 和 JavaScript 钩子监听器，但有以下几点区别：

2. 默认情况下，它不会渲染一个容器元素。但你可以通过传入 tag prop 来指定一个元素作为容器元素来渲染。

3. 过渡模式在这里不可用，因为我们不再是在互斥的元素之间进行切换。

4. 列表中的每个元素都必须有一个独一无二的 key attribute。

5. CSS 过渡 class 会被应用在列表内的元素上，而不是容器元素上。

进入 / 离开动画​

这里是 <TransitionGroup> 对一个 v-for 列表添加进入 / 离开动画的示例：

<TransitionGroup name="list" tag="ul">
  <li v-for="item in items" :key="item">
    {{ item }}
  </li>
</TransitionGroup>

.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}