使用 framer-motion 的 Animated Presence 時出現 Position 錯誤

Question

我有一個沙箱，基本上是用 React 制作的 slider，每次用戶按下按鈕 Next 或 Previous 時，舊數據都會被新數據替換。 我想使用成幀器運動為 slider 創建一些漂亮的動畫，它幾乎可以完美運行。我不知道為什么，但每次我按下按鈕進入下一個項目（或上一個項目）時，animation將元素向下移動，然后恢復正常。

我將在下面留下沙箱的鏈接，這樣可以更容易地可視化錯誤。

沙盒

Answer 1

您必須將此道具exitBeforeEnter添加到AnimatePresence

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