HTML怎么做SPA路由过渡_HTML SPA路由切换过渡动画大全

SPA路由切换动画失效主因是DOM节点被框架销毁重建，导致浏览器无法触发动画；须用v-show或display:none保留节点，显式设置transition的name与mode，并定义全部6个CSS类，优先过渡transform和opacity。

SPA路由切换动画失效，不是CSS没写对，而是DOM节点被框架销毁重建了——浏览器根本没机会触发动画。

Vue Router的<transition>不触发leave动画？检查name和mode

很多人只加<transition>标签，但没设name属性，导致生成的CSS类名是v-enter，而你写的.slide-enter压根不匹配。

• 必须显式声明name="slide"，否则所有类名都按v-前缀生成
• 加mode="out-in"，否则新旧组件会同时渲染，leave阶段被覆盖或跳过
• CSS里要定义全部6个类：.slide-enter-active、.slide-enter-from、.slide-enter-to、.slide-leave-active、.slide-leave-from、.slide-leave-to；漏一个，链就断了

React中useLocation().key变化但动画没重置？别在useEffect(() => {}, [])里初始化transform

首次挂载时设了transform: translateX(100%)，但路由切换后这个值还卡着，新页面直接从偏移位置开始动画，看起来像没动。

• 进出场状态必须随location.key重置，不能只靠组件挂载
• 用useLayoutEffect配合location.key依赖，每次切换前强制清空目标元素的transform内联样式
• 避免在@keyframes里写left: 100%——父容器宽度一变，位移就错；改用transform: translateX(100%)，不触发重排，且值稳定

CSS transition写了却“一闪而过”？DOM被卸载是主因

Vue的v-if、React的条件渲染，会让旧组件彻底卸载，节点消失，transition连起点都抓不到。

立即学习“前端免费学习笔记（深入）”；

• 把v-if换成v-show，或React里用display: none + opacity组合控制显隐，保留DOM节点
• 确保参与动画的元素在路由切换前后都存在，且继承链上没有意外的position: static打断定位上下文
• 动画开始前手动触发重排：比如在beforeEnter钩子中读一次el.offsetHeight，逼浏览器计算当前样式，否则首帧可能被跳过

为什么transition: all 0.3s反而让动画卡顿？

all会过渡所有可动画属性，包括你没意识到的color、height、border——它们触发重排，拖垮帧率。

• 只过渡明确需要的属性：transition: opacity 0.3s, transform 0.3s
• transform和opacity走GPU加速，其他如left、top、width会强制CPU渲染
• 如果必须动高度，别用height过渡（auto值不支持），改用max-height或JS测高后设固定值

最常被忽略的一点：动画效果是否生效，80%取决于DOM是否连续存在，而不是CSS写得多漂亮。先保节点，再调样式，顺序错了，后面全白搭。