Vue2 结合 animate.css 实现专业动效需掌握三点：类名必须带 animate__ 前缀且含 animate__animated；v-show 是触发过渡前提，v-if 会导致动画失效；持续时间优先用 CSS 变量 --animate-duration 控制，:duration 仅影响钩子时机。

Vue2 结合 animate.css 实现丰富过渡效果，关键不在“堆动画”，而在“控节奏、配逻辑、避坑点”。只要掌握类名规则、v-show 必须配合、duration 与 CSS 变量协同这三点，就能稳定输出专业级动效。

类名必须带前缀且结构固定

animate.css v4+ 版本强制要求所有动画类必须以 animate__ 开头，且基础类 animate__animated 不可省略。否则动画不触发。

• 正确写法：enter-active-class="animate__animated animate__fadeInUp"
• 错误写法：enter-active-class="fadeInUp"（缺前缀）或 "animated fadeInUp"（旧版写法，v4 不兼容）
• 官网右侧动画列表中每个效果的类名，都需手动补上前缀，比如 zoomIn → animate__zoomIn

v-show 是触发过渡的前提条件

transition 组件只监听元素的“插入/移除”过程，而 v-if 会彻底销毁 DOM，v-show 则只是切换 display。animate.css 动画依赖元素始终存在于 DOM 中，仅靠 visibility 或 opacity 控制显隐，因此必须用 v-show。

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

• 若用 v-if，首次进入可能无动画（DOM 未挂载完就执行）；离开时也可能跳过 leave 阶段
• 常见写法：
  ，搭配 使用
• 多个元素过渡时， 内每个子元素也必须带 v-show 和唯一 key

控制持续时间有两套方案，推荐 CSS 变量优先

Vue 的 :duration 属性虽能设毫秒值，但仅控制 JS 钩子时机，无法改变 animate.css 实际动画帧率。真正生效的是 animate.css 提供的 CSS 自定义属性。

• 在目标元素上设置：.box { --animate-duration: 1.2s; --animate-delay: 0.3s; }
• 支持单位：s 或 ms（如 800ms），也可用 CSS 变量继承，方便主题化控制
• 若需不同 enter/leave 时长，可分别给父容器加 class，再通过 scoped style 精准覆盖变量值

多元素过渡要用 transition-group 并严格配 key

单个元素用 ，多个同级元素动态显示/隐藏时，必须改用 ，否则动画错乱或失效。

• key 值必须唯一且稳定（不能用 index，推荐用业务 ID 或字符串标识）
• appear 属性可启用初始渲染动画，例如页面加载时逐条飞入
• enter/leave 类名直接写在 上，无需额外包裹 div

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！