过度动画基础

Vue 过渡动画系统提供声明式动画方案，通过 <Transition> 组件封装元素进入/离开 DOM 时的动画效果。

核心概念

什么是过渡动画

过渡动画是元素在状态切换时（显示/隐藏、插入/移除）应用的视觉效果，Vue 通过自动添加 CSS 类名实现。

过渡动画适用于单元素的进入/离开场景，多元素列表使用 <TransitionGroup>。

动画生命周期

Vue 在元素状态变化时自动添加 6 个 CSS 类名：

基本用法

单元素过渡

<template>
  <Transition name="fade">
    <p v-if="show">动画内容</p>
  </Transition>
</template>

<script setup>
import { ref } from 'vue'

const show = ref(true)
</script>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

name 属性决定类名前缀，默认使用 v- 前缀。

动画模式控制

<Transition name="slide" mode="out-in">
  <component :is="currentComponent" />
</Transition>

JavaScript 钩子

生命周期钩子

<Transition
  @before-enter="onBeforeEnter"
  @enter="onEnter"
  @after-enter="onAfterEnter"
  @before-leave="onBeforeLeave"
  @leave="onLeave"
  @after-leave="onAfterLeave"
>
  <p v-if="show">内容</p>
</Transition>

<script setup>
const onEnter = (el, done) => {
  // 动画逻辑
  done() // 必须调用，通知 Vue 动画完成
}
</script>

使用 JavaScript 钩子时，enter 和 leave 钩子必须调用 done() 回调。

注意事项

• 过渡动画仅对 v-if、v-show、动态组件生效
• mode="out-in" 最常用，避免新旧元素同时存在导致布局闪烁
• CSS 过渡需设置合理的 transition 属性和时长
• 动画元素必须有明确的进入/离开状态切换

要点总结

• Vue 通过 <Transition> 组件自动管理 6 个 CSS 过渡类名
• name 属性控制类名前缀，mode 控制动画顺序
• 支持 CSS 过渡和 JavaScript 钩子两种实现方式
• JavaScript 钩子必须调用 done() 通知动画完成

存放路径: articles/VUE/进阶/过度动画与状态复用/过度动画基础.md