transition 组件实现路由动画需包裹 router-view 并配对 6 个 css 类名（如 slide-enter-from/to、slide-leave-from/to），其中 -active 类必须声明 transition 属性；推荐 mode="out-in" 避免重叠，并可通过 route.meta.transition 动态绑定不同动画名称。

用 Transition 组件给路由切换加动画，核心就两点：包裹 router-view、配对 CSS 类名。它不复杂，但类名逻辑和 mode 模式容易踩坑。

基础结构：用 transition 包住 router-view

在 App.vue 或主布局文件中，把 <router-view></router-view> 放进 <transition></transition> 里，并指定 name 属性——这个 name 会成为所有过渡类名的前缀：

<router-view v-slot="{ Component }"><transition name="slide"><component :is="Component"></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"></component></transition>

out-in 表示：当前页面先执行离开动画，结束后新页面才开始进入动画。适合大多数场景，避免视觉冲突。

按路由定制不同动画（进阶技巧）

不想所有页面都用同一种动效？利用路由元信息 meta.transition 动态绑定 name：

• 在路由配置里加字段：{ path: '/about', component: About, meta: { transition: 'slide-right' } }
• 模板中这样写：<transition :name="route.meta.transition || 'fade'"></transition>

然后为每个 name 单独写一套 CSS，比如 .slide-right-enter-from { transform: translateX(100%); }，就能实现左滑进、右滑出等差异化效果。