Vue 动画过渡系统：从 CSS 过渡到 JavaScript 钩子的完整实现

快速概述

Vue 动画过渡系统用于在元素插入、更新或移除时平滑地呈现视觉变化，解决页面切换或列表渲染时生硬跳变的问题。它适用于路由切换、条件渲染、列表增删等场景。前置环境要求：Vue 3.x 及以上版本，以及基础的 HTML、CSS 和 JavaScript 知识。

核心概念与原理

Vue 提供了内置的 <transition> 组件，简化动画效果的实现。 其核心机制是：当元素被插入或移除时，Vue 自动检测目标元素是否应用了 CSS 过渡或动画，并在合适的时机添加/移除对应的类名；同时，它也暴露了 JavaScript 钩子函数，允许开发者用 JS 控制动画的每个阶段。这种设计遵循“渐进式框架”理念，开发者可以按需引入动画能力，无需一次性掌握全部特性。

实战步骤与代码

1. 基础 CSS 过渡

使用 <transition> 包裹条件渲染的元素，并定义进入和离开的 CSS 类。

<template>
  <button @click="show = !show">切换</button>
  <transition name="fade">
    <p v-if="show">Hello Vue</p>
  </transition>
</template>
<style> /* 进入前和离开后的状态 */ .fade-enter-from, .fade-leave-to { opacity: 0; } /* 过渡过程 */ .fade-enter-active, .fade-leave-active { transition: opacity 0.5s; } </style>

当 show 变为 true 时，Vue 添加 fade-enter-from 和 fade-enter-active 类，触发过渡；离开时同理。

2. 使用 JavaScript 钩子

在 <transition> 上绑定钩子函数，完全控制动画流程。

<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter"
  @before-leave="beforeLeave"
  @leave="leave"
  @after-leave="afterLeave"
>
  <div v-if="show">内容</div>
</transition>
<script setup> const beforeEnter = (el) => { el.style.opacity = 0; }; const enter = (el, done) => { // 使用 Web Animations API 或手动设置样式 el.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 500 }); // 完成后必须调用 done() setTimeout(done, 500); }; const afterEnter = (el) => { console.log('进入完成'); }; // 其他钩子类似 </script>

注意：使用 JS 钩子时，若未调用 done()，动画不会结束，可能导致元素状态异常。

3. 路由切换动画

结合 Vue Router，为路由视图添加过渡效果。

<router-view v-slot="{ Component }">
  <transition name="slide" mode="out-in">
    <component :is="Component" />
  </transition>
</router-view>

通过 mode="out-in" 确保旧视图先离开，新视图再进入，避免重叠闪烁。

常见坑点与优化

• 忘记调用 done()：在 JS 钩子中，如果使用异步操作（如请求动画帧），必须确保 done() 被调用，否则过渡会卡住。
• CSS 类名拼写错误：Vue 3 中类名格式为 name-enter-from、name-leave-to，注意连字符和下划线。
• 性能优化：避免在动画中操作引起重排的属性（如 width、height），优先使用 transform 和 opacity，利用 GPU 加速。
• 过度使用动画：动画过多会影响用户体验，建议为不同场景设计统一的动画时长和缓动函数。

通过以上步骤，你可以从简单的 CSS 过渡平滑升级到 JavaScript 钩子控制，实现复杂且高性能的 Vue 动画效果。