TransitionGroup ​

<TransitionGroup> 是一个内置组件，专为列表中元素或组件的插入、移除以及顺序变化的动画而设计。

与 <Transition> 的区别 ​

<TransitionGroup> 支持与 <Transition> 相同的 props、CSS 过渡类以及 JavaScript 钩子监听器，但有以下区别：

• 默认情况下，它不会渲染包装元素。不过你可以通过 tag prop 指定要渲染的元素。

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

• 内部元素始终必须具有唯一的 key 属性。

• CSS 过渡类会应用到列表中的单个元素上，而不是应用到整个组 / 容器本身。

进入 / 离开过渡 ​

下面是一个使用 <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);
}

移动过渡 ​

上面的演示有一些明显的问题：当某个项目被插入或移除时，它周围的项目会瞬间“跳”到位，而不是平滑移动。我们可以通过添加一些额外的 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;
}

现在看起来好多了——即使整个列表被打乱时也能平滑地执行动画：

完整示例

自定义 TransitionGroup 类名 ​

你也可以通过向 <TransitionGroup> 传递 moveClass prop 来为移动元素指定自定义过渡类，就像在 <Transition> 上使用自定义过渡类一样。

列表过渡的交错动画 ​

通过借助数据属性与 JavaScript 过渡进行通信，也可以在列表中实现交错过渡。首先，我们将项目的索引渲染为 DOM 元素上的一个数据属性：

<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 钩子中，我们根据该数据属性设置延迟来为元素添加动画。此示例使用 GSAP 库 来执行动画：

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

相关内容

• <TransitionGroup> API 参考