TransitionGroup {#transitiongroup}
<TransitionGroup> 是一个内置组件，用于对 v-for 列表中的元素或组件的插入、移除和顺序改变添加动画效果。
和 <Transition> 的区别 {#differences-from-transition}
<TransitionGroup> 支持和 <Transition> 基本相同的 props、CSS 过渡 class 和 JavaScript 钩子监听器，但有以下几点区别：
-
默认情况下，它不会渲染一个容器元素。但你可以通过传入
tagprop 来指定一个元素作为容器元素来渲染。 -
过渡模式在这里不可用，因为我们不再是在互斥的元素之间进行切换。
-
列表中的每个元素都必须有一个独一无二的
keyattribute。 -
CSS 过渡 class 会被应用在列表内的元素上，而不是容器元素上。
:::tip
当在 DOM 内模板中使用时，组件名需要写为 <transition-group>。
:::
进入 / 离开动画 {#enter-leave-transitions}
这里是 <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);
}
移动动画 {#move-transitions}
上面的示例有一些明显的缺陷：当某一项被插入或移除时，它周围的元素会立即发生“跳跃”而不是平稳地移动。我们可以通过添加一些额外的 CSS 规则来解决这个问题：
```css{1,13-17} .list-move, / 对移动中的元素应用的过渡 / .list-enter-active, .list-leave-active { transition: all 0.5s ease; }
.list-enter-from, .list-leave-to { opacity: 0; transform: translateX(30px); }
/ 确保将离开的元素从布局流中删除 以便能够正确地计算移动的动画。 / .list-leave-active { position: absolute; }
现在它看起来好多了，甚至对整个列表执行洗牌的动画也都非常流畅：
<ListMove />
[完整的示例](/examples/#list-transition)
### 自定义过渡组 class {#custom-transitiongroup-classes}
你还可以通过向 `<TransitionGroup>` 传递 `moveClass` prop 为移动元素指定自定义过渡 class，类似于[自定义过渡 class](/guide/built-ins/transition.html#custom-transition-classes)。
## 渐进延迟列表动画 {#staggering-list-transitions}
通过在 JavaScript 钩子中读取元素的 data attribute，我们可以实现带渐进延迟的列表动画。首先，我们把每一个元素的索引渲染为该元素上的一个 data attribute：
```vue-html{11}
<TransitionGroup
tag="ul"
:css="false"
@before-enter="onBeforeEnter"
@enter="onEnter"
@leave="onLeave"
>
<li
v-for="(item, index) in computedList"
:key="item.msg"
:data-index="index"
>
{{ item.msg }}
</li>
</TransitionGroup>
接着，在 JavaScript 钩子中，我们基于当前元素的 data attribute 对该元素的进场动画添加一个延迟。以下是一个基于 GSAP library 的动画示例：
js{5}
function onEnter(el, done) {
gsap.to(el, {
opacity: 1,
height: '1.6em',
delay: el.dataset.index * 0.15,
onComplete: done
})
}
参考