使用 framer-motion 的 Animated Presence 时出现 Position 错误

Question

我有一个沙箱，基本上是用 React 制作的 slider，每次用户按下按钮 Next 或 Previous 时，旧数据都会被新数据替换。 我想使用成帧器运动为 slider 创建一些漂亮的动画，它几乎可以完美运行。我不知道为什么，但每次我按下按钮进入下一个项目（或上一个项目）时，animation将元素向下移动，然后恢复正常。

我将在下面留下沙箱的链接，这样可以更容易地可视化错误。

沙盒

Answer 1

您必须将此道具exitBeforeEnter添加到AnimatePresence

<AnimatePresence exitBeforeEnter initial={false} custom={back}>
// ...
</AnimatePresence>