Vue.js 过渡与动画系统：Transition 组件的应用-Vue.js-PHP中文网

Vue的Transition组件通过控制6个CSS类名的注入时机实现动画，本身不渲染DOM也不执行动画，需开发者编写transition或animation规则；常见问题包括display不可过渡、缺少active类声明、父容器塌陷等，多元素过渡须用TransitionGroup，还可结合JS钩子实现精细控制。

vue.js 过渡与动画系统：transition 组件的应用

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 后缀；若写了，类名前缀就变成 slide-enter-from，不是 v-slide-enter-from。

常见动不起来的原因和解法

样式写了，但没动画？多半卡在这几个关键点：

Vue Wrap

Vue 入门指南 — JavaScript 框架

下载

目标元素用了 v-if 切换，但同时设置了 display: none —— display 不可过渡。应改用 v-show，或配合 visibility: hidden + opacity
v-enter-active 或 v-leave-active 缺少 transition 或 animation 声明，等于没通电
父容器高度塌陷：v-if 移除子元素后，父级高度归零，导致“闪退”。可设 min-height，或对 height 做过渡
两个互斥元素共用一个，Vue 默认并行过渡。加 mode="out-in"，确保旧元素走完再进新元素

Transition 和 TransitionGroup 的分工

只能包裹**一个直接子元素**。如果里面放两个

，Vue 直接报错。
单个元素显隐（比如弹窗、提示条）→ 用 

  多个元素批量进出（比如列表项增删、路由切换时多个组件）→ 必须用 

  
 会渲染一个真实 DOM 标签（默认是 ），可指定 tag 属性替换成  等语义化容器


搭配 JS 钩子做更精细控制
除了 CSS 类，Transition 还支持 JavaScript 钩子，在关键节点执行逻辑：


@before-enter：元素插入前，DOM 尚未挂载，适合初始化状态
  
@enter：元素已插入，可操作 DOM（如触发 scrollIntoView）
  
@after-enter：动画结束，适合清理或后续动作
  
@leave：离开开始，可读取当前尺寸用于 height 过渡
  
@after-leave：元素彻底移除，适合重置数据或释放资源

钩子函数接收元素实例，配合 getBoundingClientRect() 或 offsetHeight，能实现高度自适应过渡等复杂效果。

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