HTML页面切换动画怎么做【代码详解】

本文深入解析了单页应用中页面切换动画的实现原理与常见陷阱，涵盖 Vue Router、纯 HTML/CSS、animate.css、GSAP 以及 React Router v6 等多种技术栈下的实战方案，重点揭示 transition 不生效的三大根源（包裹结构错误、CSS 钩子类名不匹配、组件未动态加载），并提供可落地的调试思路和高阶技巧——如用 history.state 区分前进/后退方向实现智能动画、GSAP timeline 精确控制双页进出时序、React 中 unmountOnExit 的关键作用等，帮你避开“看似写对却动不了”的坑，真正做出流畅、一致、健壮的路由动效体验。

Vue Router 切换时 transition 不生效？检查这三点

多数情况不是动画写错了，而是 没被 正确包裹，或 CSS 类名没匹配上 Vue 的过渡钩子。Vue 2 和 3 的类名约定不同，容易漏掉 v-leave-to 或 v-enter-active 这类关键类。

实操建议：

• 必须直接包裹 ，不能隔着 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，且只需「新页淡入」：直接在 上加 class="animate__animated animate__fadeIn"，配合 appear 属性
• 需要「旧页向左滑出 + 新页从右滑入」：用 GSAP 写 tl.to(oldEl, {x: '-100%', opacity: 0}).to(newEl, {x: 0, opacity: 1})
• Vue 3 用户可考虑 useTransition 组合式 API，它比全局 更灵活，能基于路由元信息动态选动画

React Router v6 的 useNavigate 怎么配 CSSTransition？别漏掉 unmountOnExit

直接用 包 是常见错误——v6 的 不是真实 DOM 节点，得包在 外层或每个 内部。

可靠写法：

• 用 react-transition-group 的 包住整个 ，每个 的 element 用 单独包裹
• 必须设 unmountOnExit={true}，否则旧组件不卸载，多个页面 DOM 会堆叠
• CSS 里写 .slide-enter / .slide-enter-active 等类，注意 slide-enter-active 要含 transition，而 slide-enter 只设起始状态（如 transform: translateX(100%)）

真正难的不是写出第一个动画，而是让「前进」「后退」「异常跳转」三种场景都表现一致。比如浏览器后退时，得靠 history.state 记录方向，再决定用 slideInLeft 还是 slideInRight ——这点很容易被忽略。

理论要掌握，实操不能落！以上关于《HTML页面切换动画怎么做【代码详解】》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！