Vue.js 中的 transition-group：掌握动画组

2023-10-04 16:16:06

在 Vue.js 的丰富生态系统中，transition-group 组件是一个强大的工具，用于协调一组元素的过渡动画。它让开发人员能够为添加到或从 DOM 中删除元素添加优雅的动画效果，从而增强用户体验。本文将深入探讨 transition-group 的功能，帮助您充分利用其潜力。

理解 `transition-group`

transition-group 组件是一个包裹容器，它包含一组元素。当元素被添加到或从该组中删除时，它会自动应用过渡效果。这可以创建诸如淡入、淡出、缩放或滑动的平滑动画。

要使用 transition-group，您只需将其作为包裹组件，然后在其中包含要动画化的元素即可。该组件提供了多种属性和事件，让您自定义动画行为。

自定义动画效果

transition-group 提供了几个属性来定制动画效果，包括：

name： 指定过渡名称，它与 CSS 规则中的 transition 属性相对应。
mode： 指定过渡模式，有两种选择："out-in" 或 "in-out"。
appear： 是否在元素首次插入时应用过渡。
css： 是否在 CSS 中而不是使用 JavaScript 类名来应用过渡。

通过结合这些属性，您可以创建各种各样的动画效果，满足您的设计需求。

处理过渡状态

transition-group 组件还提供了两个事件，用于处理元素过渡过程中的状态变化：

before-enter： 在元素被添加到 DOM 之前触发。
after-enter： 在元素被添加到 DOM 之后触发。
before-leave： 在元素被从 DOM 中删除之前触发。
after-leave： 在元素被从 DOM 中删除之后触发。

这些事件允许您在过渡过程中执行自定义操作，例如更新状态或发出网络请求。

一个示例：淡入淡出列表项

为了演示 transition-group 的用法，让我们创建一个在列表中添加和删除项目时使用淡入淡出动画的组件：

<template>
  <transition-group name="fade">
    <ul>
      <li v-for="item in items" :key="item">{{ item }}</li>
    </ul>
  </transition-group>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const items = ref(['Item 1', 'Item 2', 'Item 3'])
    return { items }
  }
}
</script>

<style>
.fade-enter-active {
  transition: opacity 0.5s ease-in-out;
}
.fade-leave-active {
  transition: opacity 0.5s ease-in-out;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>