Vue内置组件Transition

封面图 • 2025-09-29 • Vue

在 Vue 中，`<Transition>` 是一个**内置组件**，用于在元素或组件进入或离开 DOM 时添加**过渡动画**。它主要用于控制元素的显示/隐藏，并在切换时应用 CSS 过渡或动画。

---

## ✅ 基本用法

```vue
<template>
  <div>
    <button @click="show = !show">切换</button>
    <Transition name="fade">
      <p v-if="show">这是一个过渡文本</p>
    </Transition>
  </div>
</template>

---

## 🔍 `Transition` 组件的关键属性

| 属性 | 说明 |
|------|------|
| `name` | 定义过渡的类名前缀（如 `fade`），默认是 `v` |
| `mode` | 控制过渡的顺序，可选值：`in-out`、`out-in`、`default` |
| `appear` | 是否在初始渲染时应用过渡（适用于 `v-if` 或 `v-show`） |
| `css` | 是否使用 CSS 过渡（默认为 `true`） |
| `duration` | 设置过渡的持续时间（可以是数字或对象） |

---

## 🔄 过渡阶段类名

Vue 会根据过渡的不同阶段自动添加对应的类名：

| 类名 | 触发时机 |
|------|----------|
| `enter` | 元素进入时 |
| `enter-active` | 进入过程中（通常设置动画） |
| `enter-to` | 进入结束时（在 Vue 2 中是 `enter-active`） |
| `leave` | 元素离开时 |
| `leave-active` | 离开过程中 |
| `leave-to` | 离开结束时 |

> 注意：在 Vue 3 中，`enter-to` 和 `leave-to` 是标准的类名，而 Vue 2 中可能使用的是 `v-enter-to` 和 `v-leave-to`。

---

## 💡 示例：使用 `mode="out-in"`

```vue
<Transition mode="out-in">
  <component :is="currentComponent" />
</Transition>
```

这表示在切换组件时，先让旧组件离开，再让新组件进入。

---

## 🧠 小贴士

- `<Transition>` 只能包裹一个子元素或组件。
- 如果你需要对多个元素进行过渡，可以使用 `<TransitionGroup>`。
- 使用 JavaScript 动画时，可以通过 `@before-enter`, `@enter`, `@after-enter`, `@before-leave`, `@leave`, `@after-leave` 等事件钩子。

---

## 📦 总结

| 特性 | 说明 |
|------|------|
| 类型 | 内置组件 |
| 用途 | 控制元素/组件的过渡动画 |
| 支持 | Vue 2 和 Vue 3 |
| 配合 | `v-if`, `v-show`, `v-for`（需搭配 `<TransitionGroup>`） |

如果你需要更复杂的动画控制，也可以结合 [GSAP](https://greensock.com/gsap/) 或 [anime.js](https://animejs.com/) 等动画库来实现。

需要我帮你写一个具体的过渡示例吗？