一、为什么需要 Transition 组件？

当元素在 DOM 中插入、更新、移除时， Transition 组件可以：

1. 实现平滑的 CSS 动画/过渡效果
2. 自动管理过渡类名的添加与移除
3. 提供 JavaScript 钩子实现复杂动画
4. 提升用户体验的流畅感

二、核心工作原理

<transition name='fade'><div v-if='show'>内容</div>
</transition>

流程：

1. 元素插入时自动添加 v-enter-from -> v-enter-to 类名
2. 元素移除时自动添加 v-leave-from -> v-leave-to 类名
3. 根据 CSS 过渡或动画时长自动处理 DOM 操作

三、基础用法：6个过渡类名

假设 <transition name="fade">：

类名	作用阶段
.fade-enter-from	进入动画起始状态
.fade-enter-active	进入动画生效时的样式（定义过渡时长/效果）
.fade-enter-to	进入动画结束状态
.fade-leave-from	离开动画起始状态
.fade-leave-active	离开动画生效时的样式
.fade-leave-to	离开动画结束状态

示例1：淡出淡入

<template><button @click="show = !show">切换</button><transition name="fade"><div v-if="show" class="box">Hello</div></transition>
</template><style>
.fade-enter-from, .fade-leave-to {opacity: 0;
}
.fade-enter-active, .fade-leave-active {transition: opacity 0.5s;
}
</style>

四、进阶用法

1. 使用 CSS 动画（非过渡）

.fade-enter-active {animation: bounce-in 0.5s;
}
.fade-leave-active {animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {0% { transform: scale(0); }50% { transform: scale(1.25); }100% { transform: scale(1); }
}

2.自定义过渡时间

<transition :duration="1000">...</transition>  // 统一时长
<transition :duration="{ enter: 500, leave: 800 }">...</transition>  // 分别设置

初始渲染过渡

<transition appear></transition> // 首次加载时触发过渡

五、 JavaScript 钩子函数

实现更复杂的动画逻辑（如结合GSAP）

<transition@before-enter="beforeEnter"@enter="enter"@after-enter="afterEnter"@enter-cancelled="enterCancelled"@before-leave="beforeLeave"@leave="leave"@after-leave="afterLeave”@leave-cancelled="leaveCancelled"
>
</transition><script setup>
// 进入动画
const beforeEnter = (el) => {el.style.opacity = 0;
}const enter = (el, done) => {gsap.to(el, {opacity: 1,duration: 1,onComplete: done // 必须调用 done 来结束过渡})
}
</script>

六、过渡模式（Mode）

解决进入和离开同时发生的冲突

<transition mode="out-in">  //先完成离开动画，再执行进入动画<component :is="view"></component>
</transition>

七、列表过渡（TransitionGroup）

处理 v-for 列表的动画：

<transition-group name="list" tag="ul"><li v-for="item in items" :key="item.id">{{ item.text }}</li>
</transition-group><style>
.list-move {   // 处理列表排序变化的过程transition: transform 0.8s ease;
}
</style>

八、与第三方动画库结合（如 Animate.css）

<transitionenter-active-class="animate__animated animate__data"leave-active-class="animate__animated animate__bounceOut"
><div v-if="show">内容</div>
</transition>

九、最佳实践与性能优化

1. 优化使用 CSS 过渡：浏览器可优化，性能更好
2. 避免过渡太多属性：优先使用 transform 和 opacity （可硬件加速）
3. 设置 :css="false" ：当完全使用 JS 动画时，跳过 CSS 类名检测
4. 合理使用 key：帮助 Vue 正确识别元素
5. 列表过渡添加 v-move 类：优化排序动画

十、Vue3 与 Vue2 的 Transition 组件核心差异

1.类名命名的变化
Vue3 将 v-enter 和 v-leave 重命名为 v-enter-from 和 v-leave-from ，使类名语义更清晰（明确表示起始状态）。

2.根元素处理方式的差异

Vue2 的限制：

• <transition> 组件内必须只有一个根元素
• 多元素过渡需用<transition-group>

Vue3 的改进：

• 支持多个根元素，但需要为每个元素添加 key

<!-- Vue3 合法写法 -->
<transition><div v-if="show" key="a">内容A</div><div v-else key="b">内容B</div>
</transition>

3.新增特性：

• transition 支持作为普通属性传递
  Vue3 允许直接在组件上使用 transition 属性：

<router-view v-solt="{ Component }"><component:is="Component":transition="{ name:'fade', mode:'out-in' }"/>
</router-view>

• 更智能的过渡持续时间检测
  Vue3 会自动检测 CSS 动画/过渡的实际持续时间，减少手动设置 :duration的需求
• appear属性的改进
  Vue3 的 appear 支持配置对象

<transitionappear:appear-class="custom-appear-class":appear-active-class="custom-appear-active-class"
>

十一、常见问题解决方案

Q1：过渡效果不生效

• 检查元素是否应用 v-if / v-show
• 确认 CSS 类名拼写正确
• 确保过渡属性在 -active 类中

Q2：列表动画错位

• 为 <transition-group> 添加 tag 属性（如tag="div"）
• 检查元素是否设置正确的 key

Q3：动画卡顿

• 使用 will-change: transform 开启硬件加速
• 简化复杂动画