javascript - 使用 framer-motion 的 Animated Presence 时出现位置错误

Question

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

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

沙盒

Answer 1

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

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