Transition 组件实现路由动画需包裹 router-view 并配对 6 个 CSS 类名（如 slide-enter-from/to、slide-leave-from/to），其中 -active 类必须声明 transition 属性；推荐 mode="out-in" 避免重叠，并可通过 route.meta.transition 动态绑定不同动画名称。
基础结构：用 transition 包住 router-view
在 App.vue 或主布局文件中，把 <router-view> 放进 <transition> 里，并指定 name 属性——这个 name 会成为所有过渡类名的前缀：
<router-view v-slot="{ Component }">
<transition name="slide">
<component :is="Component" />
</transition>
</router-view>
注意：Vue 3 推荐使用 v-slot 解构方式，比直接写 <transition><router-view></router-view></transition> 更可控，也兼容动态组件的 props 传递。
CSS 类名必须写全这六个（Vue 3 规则）
Vue 3 的 transition 对类名做了标准化，共 6 个，分“进入”和“离开”两组，每组含 from / active / to：
-
进入阶段：
slide-enter-from（起始）、slide-enter-active（全过程）、slide-enter-to（终点） -
离开阶段：
slide-leave-from（起始）、slide-leave-active（全过程）、slide-leave-to（终点）
关键细节：
Skill Weave Chains — 技能链路由引擎
下载
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
-
-active类里必须写transition属性（如transition: all 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);），否则没动画 -
-from和-to类定义状态快照（比如transform: translateX(-20px)或opacity: 0） - 别漏掉
-from和-to—— Vue 2 的enter/leave简写在 Vue 3 中已失效
控制切换顺序：mode 决定谁先动
默认是 mode="in-out"（新页先进，旧页再退），常导致白屏或重叠。更自然的体验推荐 out-in：
<transition name="slide" mode="out-in"> <component :is="Component" /> </transition>
out-in 表示：当前页面先执行离开动画，结束后新页面才开始进入动画。适合大多数场景，避免视觉冲突。
按路由定制不同动画（进阶技巧）
不想所有页面都用同一种动效？利用路由元信息 meta.transition 动态绑定 name：
- 在路由配置里加字段：
{ path: '/about', component: About, meta: { transition: 'slide-right' } } - 模板中这样写：
<transition :name="route.meta.transition || 'fade'">
然后为每个 name 单独写一套 CSS，比如 .slide-right-enter-from { transform: translateX(100%); }，就能实现左滑进、右滑出等差异化效果。
