Vue内置组件TransitionGroup详细介绍

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

和  的区别​

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

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

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

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

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

TIP

当在 DOM 内模板中使用时，组件名需要写为 。

进入 / 离开动画​

这里是  对一个 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);
}

在任意位置添加一项移除任意位置上的一项

• 1
• 2
• 3
• 4
• 5

移动动画​

上面的示例有一些明显的缺陷：当某一项被插入或移除时，它周围的元素会立即发生“跳跃”而不是平稳地移动。我们可以通过添加一些额外的 CSS 规则来解决这个问题：

.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;
}

现在它看起来好多了，甚至对整个列表执行洗牌的动画也都非常流畅：

添加删除重新排序

• 1
• 2
• 3
• 4
• 5

渐进延迟列表动画​

通过在 JavaScript 钩子中读取元素的 data attribute，我们可以实现带渐进延迟的列表动画。首先，我们把每一个元素的索引渲染为该元素上的一个 data attribute：

<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 对该元素的进场动画添加一个延迟。

function onEnter(el, done) {
  gsap.to(el, {
    opacity: 1,
    height: '1.6em',
    delay: el.dataset.index * 0.15,
    onComplete: done
  })
}