必须用 mode="out-in"，因为默认模式下新旧组件 enter/leave 同时触发导致重叠或空白；out-in 强制先完成离开再开始进入，实现连贯淡入淡出。
router-view 必须被 <Transition> 包裹，且需显式指定 name 和 mode="out-in"，否则会出现闪屏或过渡失效。
为什么必须用 mode="out-in"
默认模式下，新旧组件的 enter/leave 同时触发，导致两个页面短暂重叠或空白；out-in 强制先完成离开动画、再开始进入动画，是淡入淡出视觉连贯的前提。
- 不加
mode：可能看到上一个页面还没消失，下一个已半透明叠加出现 -
mode="in-out"：新页先淡入，旧页后淡出 → 中间有双层内容，破坏“切换”语义 -
mode="out-in"：旧页完全透明后，新页才开始从透明变不透明 → 符合人眼对“页面替换”的预期
.fade-enter-from 和 .fade-leave-to 必须设为 opacity: 0
Vue 3 的 <Transition> 使用新的类名规范（-from/-to 后缀），旧的 .fade-enter / .fade-leave 在 Vue 3 中已无效。漏写 -from 或 -to 会导致动画卡在初始/结束状态。
-
.fade-enter-from：新组件挂载前的起始态（必须透明） -
.fade-leave-to：旧组件卸载前的终态（必须透明） -
.fade-enter-active和.fade-leave-active：只写transition，不要写opacity值，否则会覆盖 -from/-to
过渡类必须作用于实际渲染的元素，而非 <router-view> 自身
<router-view> 是函数式组件，它不生成真实 DOM 节点；真正参与动画的是它内部渲染的路由组件根元素。所以 CSS 不能只写 .fade-enter-from，而要确保该样式能穿透到子组件的根节点上。
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
立即学习“前端免费学习笔记（深入）”；
- 若子组件根元素是
<div>，且未设 class，则.fade-enter-from > div不生效 —— 因为<Transition>添加类的对象是子组件的根元素本身，不是它的父容器 - 推荐在每个路由组件的顶层元素上加一个通用 class（如
page），然后写.fade-enter-from .page，更可控 - 使用
scopedCSS 时，需用:deep(.page)确保样式透传
动画卡顿或跳变的常见原因
淡入淡出看起来“不平滑”，往往不是代码逻辑错，而是 CSS 层面的细节失控。
-
transition缺少ease或linear时序函数，浏览器默认用ease，但部分版本表现不一致，建议显式写transition: opacity 0.3s ease - 同时存在其他影响
opacity的 CSS（比如父级filter: blur()或transform）会触发图层重组，打断过渡链 - 路由组件内有异步数据加载，
v-if控制的内容延迟渲染，造成“淡入一半才出现文字”，应配合v-show或骨架屏避免视觉割裂
最易被忽略的一点：<Transition> 只对组件的挂载/卸载生效，如果路由复用同一个组件（比如 /user/1 → /user/2），该组件不会销毁重建，enter/leave 钩子根本不会触发 —— 此时需要靠 watch $route 或 onBeforeRouteUpdate 手动控制局部动画。
