Vue 动画与过渡：为你的应用添加流畅的交互体验

Vue 动画与过渡用于在元素插入、更新或移除时提供平滑的视觉反馈，显著提升应用交互体验。适用于列表渲染、路由切换、弹窗显隐等场景。前置环境要求 Vue 3.x 项目，并具备基础的 HTML、CSS 与 JavaScript 知识。

核心概念与原理

Vue 通过内置的 <transition> 和 <transition-group> 组件实现过渡动画。其核心机制是：在元素进入或离开 DOM 时，自动添加/删除特定的 CSS 类名，从而触发 CSS 过渡或动画；同时支持 JavaScript 钩子函数，便于实现更复杂的动画逻辑。Vue 动画效果主要分为过渡效果、动画效果、状态动画和列表进入/离开动画，其中渐变效果（Fade）是最常见的实现方式。

实战步骤与代码

1. 基础过渡效果

使用 <transition> 包裹单个元素，并定义 CSS 类名即可实现淡入淡出效果。

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

当 show 变化时，Vue 自动添加对应类名，触发透明度过渡。

2. 列表动画

使用 <transition-group> 为列表项添加进入/离开动画，并支持移动动画。

<transition-group name="list" tag="ul">
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</transition-group>
<style> .list-enter-active, .list-leave-active { transition: all 0.5s ease; } .list-enter-from, .list-leave-to { opacity: 0; transform: translateX(30px); } /* 移动动画 */ .list-move { transition: transform 0.5s ease; } </style>

通过 list-move 类，列表项位置变化时也能平滑移动。

3. JavaScript 钩子

当需要更精细的控制时，可使用 @before-enter、@enter、@leave 等钩子函数，配合第三方库如 GSAP 实现复杂动画。

<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @leave="leave"
>
  <div v-if="show">内容</div>
</transition>
<script setup> const beforeEnter = (el) => { el.style.opacity = '0'; }; const enter = (el, done) => { el.style.transition = 'opacity 0.5s'; el.style.opacity = '1'; done(); }; const leave = (el, done) => { el.style.transition = 'opacity 0.5s'; el.style.opacity = '0'; done(); }; </script>

常见坑点与优化

• 类名拼写错误：Vue 的过渡类名基于 name 属性生成，如 fade-enter-from，拼写错误会导致动画不生效。
• 忘记设置 key：在 v-for 中使用 <transition-group> 时，必须为每个子元素设置唯一的 key，否则动画无法正确触发。
• 性能问题：避免在动画中使用影响布局的属性（如 width、height），优先使用 transform 和 opacity，以利用 GPU 加速。
• 过渡与 v-if 冲突：当同时使用 v-if 和 <transition> 时，确保过渡组件包裹的是单个根元素，否则可能无法触发动画。

通过合理运用 Vue 的过渡系统，可以低成本实现流畅的交互效果，提升用户体验。