在两个页面之间转换时如何防止成帧器运动动画中的内容跳跃

Question

我基本上有以下设置：

<AnimatePresence initial={false}>
  {value ? (
    <motion.div>
      {/* Page 1 content */}
    </motion.div>
  ) : (
    <motion.div>
      {/* Page 2 content */}
    </motion.div>
  )}
</AnimatePresence>

当value从 变为 时true，false我希望第 1 页向左滑出，同时第2 页从右侧滑入。这与幻灯片的工作方式或 iOS 应用程序上的页面转换非常相似。

我在 CodeSanbox 上设置了一个简单的示例：https://codesandbox.io/s/laughing-leftpad-4kin7k? file=/src/App.js:272-1064 。当我切换时，value页面按预期向左滑动，但由于页面高度不同，导致页面下方的内容向下跳转。此外，由于两个页面在动画期间同时渲染，因此第一页会导致第二页也在其下方渲染，因此当动画完成时，第二页会向上跳转。

如何制作这种动画而不让内容跳跃？理想情况下，我想要：

• 第 2 页显示在第 1 页的右侧，而不是呈现在第 1 页的下方。
  • 这将防止第 1 页在滑出动画完成后卸载时第 2 页跳起。
• 要动画到第 2 页的高度的容器的高度。
  • 这样可以防止动画开始时页面下方的内容跳下来。

Answer 1

更新 ：

添加mode="wait"您的 AnimationPresence 组件

<AnimatePresence mode="wait" initial={false}> 
    <motion.div>....</motion.div>
</AnimatePresence>