TransitionGroup ​

<TransitionGroup>是一个内置组件，用于对在列表中渲染的元素或组件的插入、删除和顺序更改进行动画处理。

<Transition>的差异 ​

<TransitionGroup>支持与<Transition>相同的props、CSS过渡类和JavaScript钩子监听器，有以下差异

• 默认情况下，它不会渲染一个包装元素。但您可以使用tag属性指定要渲染的元素。

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

• 内部元素必须具有唯一的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, /* apply transition to moving elements */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* ensure leaving items are taken out of layout flow so that moving
   animations can be calculated correctly. */
.list-leave-active {
  position: absolute;
}

现在看起来好多了——甚至当整个列表被洗牌时也可以平滑动画

完整示例

自定义TransitionGroup类 ​

您还可以通过将 moveClass 属性传递给 <TransitionGroup> 来指定移动元素的自定义过渡类，就像在 <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 参考