vue 2 的 组件通过自动添加/移除 v-enter/v-leave 系列类名实现动画，支持自定义类名 prop，并需配合 v-if/v-show 在单个元素上使用。

在 Vue 2 的 Options API 中，<transition></transition> 组件通过自动添加/移除特定类名来控制进入（enter）和离开（leave）动画。你不需要手动写 JavaScript 控制类名切换，只需提供 CSS 类名，Vue 会按生命周期自动触发。

进入过渡的三个类名（enter）

当元素被插入 DOM 时，Vue 会按顺序应用以下类名：

• v-enter：初始状态，在元素插入前一刻添加，插入后立即移除
• v-enter-active：整个进入过程都存在，用于定义 transition 或 animation 属性（如 transition: all 0.3s ease）
• v-enter-to：进入结束时的状态，在插入后下一帧添加，动画结束后移除

离开过渡的三个类名（leave）

当元素被移除时，Vue 按顺序应用：

Vuejs

Vue.js 官方推荐通过 npm 进行安装，这是构建现代化前端项目最主流的方式。在终端中执行 npm install vue 即可获取最新稳定版，如需指定版本可添加 @版本号，例如 npm install vue@3.4.0。安装前请确保已配置 Node.js 环境（推荐 v18 及以上版本），并建议将 npm 镜像源切换至国内镜像以提升下载速度。对于大型项目，还可通过 npm create v

下载

• v-leave：离开开始时添加，下一帧移除
• v-leave-active：整个离开过程存在，必须设置 transition 才能有动画效果
• v-leave-to：离开结束时的状态，离开开始后下一帧添加，动画结束后移除

自定义类名（推荐）

用 enter-from-class、enter-active-class、enter-to-class 等 prop 替换默认前缀（v-），让类名更语义化：

  enter-from-class="opacity-0 scale-95"
  enter-active-class="transition-all duration-300 ease-out"
  enter-to-class="opacity-1 scale-100"
  leave-from-class="opacity-1 scale-100"
  leave-active-class="transition-all duration-200 ease-in"
  leave-to-class="opacity-0 scale-95"
>
  

Hello

配合 v-if / v-show 使用要点

<transition></transition> 只能包裹**单个元素或组件**（或只有一个根节点的 template）；常用搭配：

• v-if：适合条件完全出现/消失，触发完整 enter/leave 流程
• v-show：只切 display，仅触发 enter/leave 类（不触发 -active 类），需额外加 display: block 等控制可见性
• 确保被包裹元素在切换时真实挂载/卸载（比如不要在 v-for 内直接套 <transition></transition>，应套在每一项的外层）

大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！