keepalive 本身不触发 transition 动画，需通过外层 transition 包裹 + v-if 控制组件显隐、配合 include 白名单缓存，或结合路由 meta、动态 key 与 onactivated/ondeactivated 钩子精细控制动画与状态。

KeepAlive 本身不触发 Transition 动画，必须靠手动控制组件的显隐状态 + 合理嵌套结构来实现缓存页面的丝滑切换。核心思路是：用 <keepalive></keepalive> 包裹需要缓存的组件，但把 <transition></transition> 放在它的外层或内层（取决于动画目标），并通过 v-if 或 include/exclude 配合生命周期钩子控制入场/离场时机。

1. 基础结构：Transition 包 KeepAlive，用 v-if 控制切换

这是最常用、最可控的方式。让 <transition></transition> 管理「是否渲染」，<keepalive></keepalive> 管理「是否缓存」：

• <transition></transition> 的 name 自定义类名，写好 CSS 过渡（如 .slide-enter-active）
• v-if 绑定当前路由对应的组件名或 key，切换时触发 Transition
• <keepalive></keepalive> 包裹具体组件，设置 include 白名单，确保组件实例被缓存
• 注意：不要对 <keepalive></keepalive> 本身加 v-if，否则会破坏缓存——要作用在它内部的组件上

示例片段：

  
    
  

2. 进阶控制：监听路由变化 + 手动管理 key

当默认的 component :is 切换不够精细（比如需要不同方向滑动、或想保留离开页的视觉残留），可结合路由元信息和动态 key：

• 给路由配置 meta: { transition: 'slide-left' } 或 'slide-right'
• 用 watch($route) 比较 to/from，设置 transitionName 和 currentKey
• <transition :name="transitionName"></transition> + <component :key="currentKey"></component> 触发重绘
• <keepalive></keepalive> 仍包裹该 component，缓存逻辑不受 key 影响（只要组件名一致）

3. 注意 keep-alive 的激活/停用钩子配合动画节奏

onActivated 和 onDeactivated 是关键时机点，可用于补足 Transition 无法覆盖的逻辑：

• 进入缓存组件时（onActivated），可恢复滚动位置、重新请求非实时数据
• 离开时（onDeactivated），可保存表单草稿、暂停定时器，避免后台运行干扰动画
• 如果动画依赖 DOM 尺寸（如 height 过渡），建议在 onActivated 的 nextTick 中操作，确保 DOM 已挂载

4. 常见坑与绕过方案

• Transition 不生效？ 检查是否误把 v-if 加在了 <keepalive></keepalive> 标签上——应加在它内部的 <component></component> 或具体组件上
• 动画卡顿或重复触发？ 确保每次切换时 :key 有变化（哪怕只是加个时间戳），避免 Vue 复用节点跳过 Transition
• 离开页还显示在屏幕上？ 用 position: absolute + z-index 控制层叠，配合 leave-to 类做位移隐藏，而非直接销毁
• keep-alive 缓存失效？ 确认组件名与 include 完全一致（区分大小写），且组件导出为命名导出或设置了 name 选项