Vue 3 的 是内置组件，用于为 v-if、v-show 或动态组件添加过渡动画，需配合 CSS 类名（如 name="fade" 对应 .fade-enter-active 等）或 JavaScript 钩子实现精细控制。
Vue 单文件组件（SFC）中使用 <transition></transition> 实现过渡动画，核心是包裹可切换的元素（如 v-if、v-show 或动态组件），并配合 CSS 类名或 JavaScript 钩子控制进入/离开过程。Vue 3 的 <transition></transition> 是内置组件，无需额外安装，但需注意作用域和类名绑定逻辑。
基础用法：包裹条件渲染内容
最常见场景是控制一个元素的显示/隐藏。在 <template></template> 中用 <transition></transition> 包裹目标元素，并确保该元素受 v-if 或 v-show 控制：
注意：v-show 只触发 display 切换，<transition></transition> 仅对 v-if、v-show 和动态组件生效，但 v-show 不会触发完整的 enter/leave 过渡（只触发 show 类）；推荐优先用 v-if。
- 定义一个响应式布尔值（如
isShow）控制显隐 - 用
<transition name="fade"></transition>包裹目标元素 - 在
<style></style>中编写对应前缀的 CSS 过渡类（如.fade-enter-active）
CSS 过渡类名规则（必须掌握）
<transition></transition> 会自动在不同时机添加/移除特定类名。以 name="fade" 为例：
立即学习“前端免费学习笔记（深入）”；
创建 Flask + Vue.js 全栈项目，采用单端口架构、uv 依赖管理、结构化日志和生产级前端设计。当用户要求以下操作时触发：创建新的 Flask+Vue 项目、搭建 Web 应用、构建全栈 Python+Vue 应用、初始化 Flask Web 项目、设置单端口 Flask 前后端项目。触发词：新建项目、创建项目、搭建项目、Flask项目、Vue项目。
-
fade-enter-from：进入动画起始状态（元素插入前） -
fade-enter-active：进入动画整个过程（含过渡属性，如transition: opacity .3s） -
fade-enter-to：进入动画结束状态（插入后） -
fade-leave-from：离开动画起始状态（触发删除前） -
fade-leave-active：离开动画整个过程（必须设transition，否则无动画） -
fade-leave-to：离开动画结束状态（元素被移除前）
若不写 name，默认为 v，类名为 v-enter-from 等。
完整 SFC 示例（含 CSS + JS 控制）
以下是一个可直接运行的 .vue 文件片段：
<template>
<button @click="isShow = !isShow">切换</button>
<Transition name="slide">
<div v-if="isShow" class="box">Hello Vue!</div>
</Transition>
</template>
<script setup>
import { ref } from 'vue'
const isShow = ref(false)
</script>
<style scoped>
.box {
width: 200px;
height: 100px;
background: #409eff;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
.slide-enter-active,
.slide-leave-active {
transition: all 0.3s ease;
}
.slide-enter-from {
opacity: 0;
transform: translateX(-20px);
}
.slide-enter-to {
opacity: 1;
transform: translateX(0);
}
.slide-leave-from {
opacity: 1;
transform: translateX(0);
}
.slide-leave-to {
opacity: 0;
transform: translateX(20px);
}
</style>
进阶技巧：动态 name 与 JavaScript 钩子
当需要更精细控制（如获取 DOM 元素、执行异步动画），可用 JavaScript 钩子：
- 在
<transition></transition>上绑定@before-enter、@enter、@after-enter、@leave等事件 - 钩子函数接收原生 DOM 元素作为参数，适合搭配 GSAP、Anime.js 等库
- 动态
name可通过变量绑定，实现不同动画策略（如:name="transitionName"）
例如：@enter="el => animate(el, { opacity: 1, x: 0 })"，其中 animate 是你封装的动画函数。
