Framermotion路由切换mode="sync"页面并排而非堆叠，如何实现融合覆盖？

关于mode="sync"的并排显示问题 #

这是预期行为。当AnimatePresence使用mode="sync"时，旧路由组件的退出动画和新路由组件的进入动画会同时执行。如果页面组件没有设置脱离文档流的定位样式，两个页面会遵循默认文档流布局规则同时显示，进而出现并排或错位的情况。

实现页面融合覆盖的配置方法 #

要让两个页面在动画过程中互相覆盖，只需给路由页面组件添加定位样式：

• 给每个路由页面添加如下CSS样式：

.route-page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100vh;
}

• 确保AnimatePresence的父容器设置position: relative，让绝对定位的页面以父容器为基准定位，避免页面溢出或错位。

这样设置后，所有路由页面都会脱离文档流，堆叠在同一个位置，使用mode="sync"时就能实现新旧页面同时动画、互相融合覆盖的效果。

内容的提问来源于stack exchange，提问作者Claude Hasler