Vue的Transition组件通过控制6个CSS类名的注入时机实现动画，本身不渲染DOM也不执行动画，需开发者编写transition或animation规则；常见问题包括display不可过渡、缺少active类声明、父容器塌陷等，多元素过渡须用TransitionGroup，还可结合JS钩子实现精细控制。
Vue 的 Transition 组件不是加个标签就出动画的“开关”，而是通过精准控制类名注入时机，把动画节奏交还给开发者。它本身不渲染 DOM，也不执行动画，只负责在元素进入或离开时，按固定顺序添加和移除 CSS 类——真正动起来的，是你写的 transition 或 animation 规则。
Transition 必须掌握的六类 CSS 名
Vue 在过渡过程中会自动切换 6 个类，分进入（enter）和离开（leave）两组，每组各三个阶段：
- v-enter-from：元素还没出现，初始态（如 opacity: 0、transform: scale(0.9)）
- v-enter-active：整个进入过程生效，必须在这里写 transition 或 animation 声明（如 transition: all 0.3s ease-out）
- v-enter-to：元素完全呈现，终态（如 opacity: 1、transform: scale(1)）
- v-leave-from：元素还在原位，离开起点（如 opacity: 1、left: 0）
- v-leave-active：整个离开过程生效，同样必须声明动画规则，否则不会动
- v-leave-to：元素彻底移出或隐藏，终点（如 opacity: 0、left: 100vw）
注意：v-enter 和 v-leave 已在 Vue 2.1.8+ 废弃，统一用 -from / -to 后缀；若写了 <transition name="slide"></transition>，类名前缀就变成 slide-enter-from，不是 v-slide-enter-from。
常见动不起来的原因和解法
样式写了，但没动画？多半卡在这几个关键点：
立即学习“前端免费学习笔记（深入）”；
- 目标元素用了
v-if切换，但同时设置了display: none—— display 不可过渡。应改用v-show，或配合visibility: hidden+opacity -
v-enter-active或v-leave-active缺少transition或animation声明，等于没通电 - 父容器高度塌陷：
v-if移除子元素后，父级高度归零，导致“闪退”。可设min-height，或对 height 做过渡 - 两个互斥元素共用一个
<transition></transition>，Vue 默认并行过渡。加mode="out-in"，确保旧元素走完再进新元素
Transition 和 TransitionGroup 的分工
<transition></transition> 只能包裹**一个直接子元素**。如果里面放两个 <div>，Vue 直接报错。
<ul>
<li>单个元素显隐（比如弹窗、提示条）→ 用 <code><transition></transition>
<transition-group></transition-group>
<transition-group></transition-group> 会渲染一个真实 DOM 标签（默认是 ），可指定 tag 属性替换成 - 等语义化容器
搭配 JS 钩子做更精细控制
除了 CSS 类，Transition 还支持 JavaScript 钩子，在关键节点执行逻辑：
-
@before-enter：元素插入前，DOM 尚未挂载，适合初始化状态 -
@enter：元素已插入，可操作 DOM（如触发 scrollIntoView） -
@after-enter：动画结束，适合清理或后续动作 -
@leave：离开开始，可读取当前尺寸用于 height 过渡 -
@after-leave：元素彻底移除，适合重置数据或释放资源
钩子函数接收元素实例，配合 getBoundingClientRect() 或 offsetHeight，能实现高度自适应过渡等复杂效果。
