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。
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 若用
v-if，首次进入可能无动画（DOM 未挂载完就执行）；离开时也可能跳过 leave 阶段 - 常见写法：
<div v-show="show" class="box"></div>，搭配<transition></transition>使用 - 多个元素过渡时，
<transition-group></transition-group>内每个子元素也必须带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
单个元素用 <transition></transition>，多个同级元素动态显示/隐藏时，必须改用 <transition-group></transition-group>，否则动画错乱或失效。
-
key值必须唯一且稳定（不能用 index，推荐用业务 ID 或字符串标识） -
appear属性可启用初始渲染动画，例如页面加载时逐条飞入 - enter/leave 类名直接写在
<transition-group></transition-group>上，无需额外包裹 div
