Vue动态组件过渡需用<transition>包裹<component :is>，设name自定义类名，配合CSS类或JS钩子控制动画；多组件切换加mode避免重叠；key强制重渲染；确保真实挂载卸载。
Vue.js 动态组件切换时添加过渡动画，核心在于用 <transition> 包裹 <component :is="...">，并配合 CSS 类名或 JavaScript 钩子控制进入/离开的样式变化。
使用 <transition> 包裹动态组件
这是最常用且推荐的方式。Vue 会自动为被包裹的动态组件添加进入和离开的 CSS 类名（如 v-enter-active、v-leave-active 等），你只需定义对应样式即可实现淡入淡出、滑动等效果。
- 确保
<component>是<transition>的直接子元素 - 给
<transition>设置name属性可自定义类名前缀（如name="fade"→ 触发fade-enter-active） - 若多个组件同时存在（如
v-if/v-else切换），需加mode="out-in"或mode="in-out"避免重叠或空白期
常见 CSS 过渡示例（淡入淡出）
以下是最简可用的淡入淡出写法：
<transition name="fade"> <component :is="currentComponent" /> </transition>
CSS 部分：
立即学习“前端免费学习笔记（深入）”；
.fade-enter-active, .fade-leave-active {
transition: opacity 0.3s ease;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
注意：opacity: 0 虽不可见，但元素仍占布局空间；如需完全移除，可在 fade-leave-to 中加 position: absolute 或配合 height: 0 等进一步控制。
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
配合 key 实现状态隔离与强制重渲染
当切换的是同一组件类型（比如都是 PostItem），仅靠 :is 切换可能复用实例，导致内部状态残留。此时可加 :key 强制 Vue 创建新实例：
<transition name="slide"> <component :is="currentComponent" :key="currentComponentName" /> </transition>
只要 key 值变化（如组件名、ID、时间戳），Vue 就会销毁旧实例、创建新实例，过渡动画也会重新触发。
进阶：JavaScript 钩子控制复杂动画
对需要精确控制（如 GSAP、ScrollTimeline 或 DOM 测量）的场景，可用 JS 钩子代替 CSS：
-
@before-enter：元素插入前调用（可设初始样式） -
@enter：元素插入后，过渡开始前（常配合nextFrame或requestAnimationFrame启动动画） -
@after-enter：动画完成时 -
@leave：离开过渡开始时 -
@after-leave：DOM 完全移除后
例如用 @enter 配合 GSAP 实现弹性入场：
<transition @enter="doEnter" @leave="doLeave" > <component :is="currentComponent" /> </transition>
在 methods 中定义：
doEnter(el, done) {
gsap.from(el, { scale: 0.8, opacity: 0, duration: 0.4, ease: "elastic.out", onComplete: done });
}
不复杂但容易忽略细节：过渡生效的前提是组件真实“挂载/卸载”，而非仅 props 变化；确保 <component> 没有被 v-show 或 display: none 干扰；动画时长需与 CSS/JS 中设置一致。
