直接用 Vue 的 包裹 可实现路由动画，需通过 v-slot="{ Component }" 解构渲染组件，设 mode="out-in" 并命名过渡，配合四类 CSS 类（-enter-active、-leave-active、-enter-from、-leave-to），优先使用 transform 和 opacity 以提升性能，结合 KeepAlive 与 activated 钩子维持状态，还可根据路由路径动态切换动画方向。

直接用 Vue 的 <transition></transition> 包裹 <routerview></routerview> 就能实现基础路由动画，关键在于正确绑定 key、设置过渡类名和控制切换模式。

核心结构：用 v-slot 拆解 RouterView

Vue Router 4 推荐使用具名插槽方式获取组件，避免 <routerview></routerview> 自身复用导致动画失效：

• 必须用 v-slot="{ Component }" 解构出当前路由组件，再用 <component :is="Component"></component> 渲染
• 外层套 <transition></transition>，并设置 mode="out-in"（先退后进），防止新旧页面重叠
• 给 <transition></transition> 设置唯一 name，如 name="slide"，用于匹配 CSS 类名

CSS 过渡类名要写全四组

每个 name 对应四类选择器，缺一不可：

• .slide-enter-active：进入动画的持续期样式（加 transition）
• .slide-leave-active：离开动画的持续期样式（也加 transition）
• .slide-enter-from：进入前初始状态（比如 transform: translateX(100%)）
• .slide-leave-to：离开后结束状态（比如 transform: translateX(-100%)）

注意：不要漏掉 -active 类，它是触发动画的关键；from 和 to 是起止位置，不是中间帧。

Skill Weave Chains — 技能链路由引擎

开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。

下载

让动画真正“丝滑”的细节

光有过渡不够，还需兼顾性能和体验：

• 优先用 transform 和 opacity 触发 GPU 加速，避免 left/top/width 引起重排
• 在 scrollBehavior 中配合延迟（如 setTimeout(..., 100)），等动画开始后再滚动，防止闪跳
• 如果路由组件内含异步数据，可在 onMounted 后手动触发动画类名切换，或用 nextTick 确保 DOM 更新完成
• 对需要保持状态的页面（如表单、滚动位置），搭配 <keepalive></keepalive>，但注意它会跳过 mounted，需用 activated 钩子补全逻辑

进阶：支持不同方向的页面切换

可以根据路由路径动态决定动画方向，比如从 /list → /detail 用右滑，返回时左滑：

• 用 useRoute() 获取当前 to 和 from
• 计算路径层级或命名规则，生成动态 name，如 name="slide-right" 或 name="slide-left"
• 对应写两套 CSS，或用 CSS 变量统一控制 transform 方向

不复杂但容易忽略。