一、环境准备

1.1 安装依赖

通过 npm 或 yarn 安装动画库：

npm install animate.css
# 或
yarn add animate.css

1.2 全局引入

在 Vue 项目的入口文件（如 main.js）中添加：

import 'animate.css'

二、Transition 组件基础

2.1 Transition 核心原理

Vue 的 <transition> 组件通过 6 个 CSS 类名控制动画阶段：

  • 进入动画：v-enter-from（起始）→ v-enter-active（过程）→ v-enter-to（结束）
  • 离开动画：v-leave-from → v-leave-active → v-leave-to

自定义动画名称可通过 name 属性实现（如 name="fade" 对应类名 fade-enter-from）。

三、Animate.css 集成

3.1 基础用法

在 Transition 组件中指定 Animate.css 的动画类：

<transition
  enter-active-class="animate__animated animate__bounceIn"
  leave-active-class="animate__animated animate__bounceOut"
>
  <div v-if="show">会弹跳的元素</div>
</transition>
  • 必须添加 animate__animated 基础类
  • 动画效果类如 animate__bounceIn 需与触发条件（如 v-if）配合使用。

3.2 自定义动画参数

通过行内样式调整动画细节：

<div 
  class="animate__animated animate__fadeIn"
  style="animation-duration: 2s; animation-delay: 0.5s;"
>
  淡入效果（持续2秒，延迟0.5秒）
</div>

四、实战案例

案例 1：模态框弹入弹出

<transition
  enter-active-class="animate__animated animate__zoomIn"
  leave-active-class="animate__animated animate__zoomOut"
>
  <div v-if="showModal" class="modal">
    <h3>重要提示！</h3>
    <button @click="showModal = false">关闭</button>
  </div>
</transition>

效果：模态框出现时缩放进入，关闭时缩放淡出。

案例 2：列表项交错动画

结合 transition-group 实现：

<transition-group 
  tag="ul"
  enter-active-class="animate__animated animate__fadeInUp"
  leave-active-class="animate__animated animate__fadeOut"
>
  <li v-for="item in list" :key="item.id">{{ item.text }}</li>
</transition-group>

特性：列表项新增时从下方淡入，删除时整体淡出。

五、进阶技巧

5.1 组合动画

通过空格分隔多个动画类：

<transition
  enter-active-class="animate__animated animate__fadeIn animate__rotateIn"
  leave-active-class="animate__animated animate__fadeOut animate__hinge"
>
  <!-- 元素同时淡入+旋转进入，离开时淡出+铰链效果 -->
</transition>

5.2 动态切换动画

根据状态切换不同动画：

const animations = reactive({
  enter: 'animate__fadeInLeft',
  leave: 'animate__fadeOutRight'
});

<transition 
  :enter-active-class="`animate__animated ${animations.enter}`"
  :leave-active-class="`animate__animated ${animations.leave}`"
>

六、注意事项

  1. 性能优化：避免同时触发过多动画，优先使用 transform 和 opacity 属性。
  2. 移动端适配：iOS 需添加 -webkit- 前缀（Animate.css v4+ 已自动处理）。
  3. 禁用场景：对 display: none 或 v-show 元素需单独处理动画逻辑。

七、扩展资源