AnimatePresence未配合overflow:hidden实现预期文本滑动效果问题

Wait模式卡顿原因 #

Wait模式会强制等待前一个元素完全退出动画后，才启动下一个元素的入场动画。这种串行切换逻辑本身就会产生视觉断层感，加上如果动画时长设置不合理，或是没有复用DOM元素（每次切换都重新创建/销毁文本节点），浏览器的重排重绘节奏会被打乱，最终出现卡顿。另外，Wait模式下元素的退出和入场没有重叠过渡，也会让滚动流畅度大打折扣。

sync模式初始回弹原因 #

sync模式要求所有元素的动画进度完全同步，组件挂载时，framer-motion会先把元素定位到动画序列的起始偏移位置（比如为了滚动效果，初始把文本放在容器上方外），之后再执行布局同步校正，把元素拉回预期初始位置。这一先偏移后校正的过程，就表现为初始文本超出位置后回弹的现象。本质是sync模式的动画起始状态和DOM自然布局不匹配，导致挂载时的样式冲突。

popLayout模式元素突然消失原因 #

popLayout模式的核心逻辑是：元素完成exit动画后，会直接从DOM中被移除，同时让布局中的其他元素自动填补它的位置。但在无限滚动场景中，你需要的是元素滑出视野后循环复用（比如滑出底部后回到顶部继续滚动），而不是被卸载。所以当exit动画执行到目标位置时，元素直接被删除，视觉上就变成了“突然消失”——哪怕去掉overflow:hidden，只要元素被卸载，就会出现这个问题，和容器的溢出设置无关。

另外要注意：无限滚动场景其实不适合依赖AnimatePresence的exit动画逻辑，更适合用循环translate动画，或是通过控制元素的y轴位置结合克隆元素实现无缝滚动，而不是靠元素的卸载/挂载来完成循环。

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