vue router切换时transition不生效，主要因router-view未被transition直接包裹、css类名未匹配vue版本钩子（vue 2用v-前缀，vue 3默认fade-前缀）、路由组件非动态加载导致enter/leave钩子未触发。
Vue Router 切换时 transition 不生效？检查这三点
多数情况不是动画写错了，而是 <router-view></router-view> 没被 <transition></transition> 正确包裹，或 CSS 类名没匹配上 Vue 的过渡钩子。Vue 2 和 3 的类名约定不同，容易漏掉 v-leave-to 或 v-enter-active 这类关键类。
实操建议：
-
<transition></transition>必须直接包裹<router-view></router-view>，不能隔着 div 或其他组件 - Vue 2 默认用
v-前缀（v-enter、v-leave-active），Vue 3 默认用fade-前缀（除非显式设name="v"） - 确保目标路由组件是「动态加载」的（
import()或定义在routes中），静态渲染的组件不会触发 enter/leave 钩子
纯 HTML + CSS 能做页面切换动画吗？可以，但得绕开刷新
真刷新（window.location.href 或 a 标签跳转）无法保留当前页 DOM 状态，也就没法做连贯过渡。必须用单页应用（SPA）思路：隐藏旧内容、插入新内容、再触发动画。
常见做法：
- 用
history.pushState()手动改 URL，不刷新页面 - 监听
popstate事件响应浏览器前进/后退 - 把所有页面内容放在一个容器里，用
display: none或opacity: 0控制显隐，配合transition: opacity 0.3s - 若需位移动画（如 slide-left），需在切换前给旧页加
animate-out类，新页加animate-in类，并用getComputedStyle等待动画结束再清理 class
animate.css 和 GSAP 哪个更适合路由动画？看控制粒度
animate.css 适合快速接入简单效果（如 fadeIn、slideInLeft），但无法精确控制两个页面的进出时序；GSAP 可以用 timeline 同步旧页 fadeOut 和新页 slideIn，更可控，但体积大、学习成本高。
选型参考：
- 项目已用
animate.css，且只需「新页淡入」：直接在<router-view></router-view>上加class="animate__animated animate__fadeIn"，配合appear属性 - 需要「旧页向左滑出 + 新页从右滑入」：用 GSAP 写
tl.to(oldEl, {x: '-100%', opacity: 0}).to(newEl, {x: 0, opacity: 1}) - Vue 3 用户可考虑
useTransition组合式 API，它比全局<transition></transition>更灵活，能基于路由元信息动态选动画
React Router v6 的 useNavigate 怎么配 CSSTransition？别漏掉 unmountOnExit
直接用 <csstransition></csstransition> 包 <outlet></outlet> 是常见错误——v6 的 <outlet></outlet> 不是真实 DOM 节点，得包在 <routes></routes> 外层或每个 <route element></route> 内部。
可靠写法：
- 用
react-transition-group的<transitiongroup></transitiongroup>包住整个<routes></routes>，每个<route></route>的element用<csstransition></csstransition>单独包裹 - 必须设
unmountOnExit={true}，否则旧组件不卸载，多个页面 DOM 会堆叠 - CSS 里写
.slide-enter/.slide-enter-active等类，注意slide-enter-active要含transition，而slide-enter只设起始状态（如transform: translateX(100%)）
真正难的不是写出第一个动画，而是让「前进」「后退」「异常跳转」三种场景都表现一致。比如浏览器后退时，得靠 history.state 记录方向，再决定用 slideInLeft 还是 slideInRight ——这点很容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
