spa路由切换css动画不触发，主因是组件卸载重建导致dom节点丢失、定位上下文断裂、transition类名不匹配或key未正确更新；需保留dom、显式设position: relative、完整定义6个过渡类、用location.pathname作key并确保钩子时机恰当。
SPA路由切换时CSS动画不触发？检查transition属性是否被强制重置
单页应用里路由跳转后元素明明加了transition，动画却一闪而过或完全没反应——大概率是框架（如Vue Router、React Router）在切换时卸载/重建组件，导致DOM节点被销毁再重建，浏览器根本没机会触发过渡。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 避免直接在
v-if或key频繁变更的组件上写transition，改用display: none+opacity组合控制显隐，保留DOM节点 - 确保目标元素在路由切换前后存在且样式可继承：比如父容器用了
position: absolute，子元素又没设top/left，动画起点会算错 - React中慎用
useEffect(() => { ... }, [])初始化动画状态，它只在挂载时执行一次；路由切换后状态未重置，transform可能卡在旧值
用@keyframes做进出场动画，但页面闪动或错位？定位上下文必须稳定
CSS动画依赖定位上下文。SPA中常见问题是：路由组件外层没设position: relative，而动画元素用了position: absolute，结果动画路径随父容器重排剧烈偏移。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有参与动画的绝对定位元素，其最近的非
static定位祖先必须显式声明position: relative（哪怕只是空样式） - 避免在
@keyframes里写left: 100%这类依赖父容器宽度的值；改用transform: translateX(100%)，性能更好且不受布局影响 - 动画开始前手动触发一次重排：比如在
beforeEnter钩子里读取offsetHeight，防止浏览器跳过首帧
Vue Router的<transition></transition>不生效？别漏掉name和mode属性
很多人以为只要包一层<transition></transition>就能自动动画，结果发现只有进入有效、离开无效，或者两个路由同时显示。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须给
<transition></transition>加name属性（如name="slide"），否则CSS类名会默认为v-enter，而你写的.slide-enter压根不匹配 - 加
mode="out-in"（推荐）或mode="in-out"，否则新旧组件会同时渲染，造成视觉重叠或z-index混乱 - 确保CSS中定义了全部6个关键类：
.slide-enter-active、.slide-enter-from、.slide-enter-to、.slide-leave-active、.slide-leave-from、.slide-leave-to；少一个就断链
React中用framer-motion做路由动画，为什么首次加载没动画？
framer-motion的<animatepresence></animatepresence>依赖key变化来识别退出元素，但SPA首次加载时，key往往来自路由参数，而初始location.pathname可能还没被正确注入。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把
<animatepresence mode="wait"></animatepresence>包在Router最外层，而不是每个Route里单独包 -
key必须用location.pathname（不是location.key），并在useLocation()变化时确保它真实更新（某些封装路由的库会缓存location对象） - 如果用
createBrowserRouter，确认没有在loader里阻塞导航——动画会在loader完成前就开始，导致状态不同步
transform，而是让浏览器在路由切换那一瞬间，准确知道“从哪来、到哪去、中间怎么走”。DOM节点是否复用、定位上下文是否断裂、CSS类名是否匹配、框架的生命周期钩子是否介入时机恰当——这些细节一错，动画就变成bug。 
