【问题标题】：How to prevent content jumping in framer-motion animation when transitioning between two pages在两个页面之间转换时如何防止 framer-motion 动画中的内容跳跃
【发布时间】：2022-12-24 05:09:43
【问题描述】：

我基本上有以下设置：

<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 跳起来。

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

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

【问题讨论】：

标签： reactjs animation framer-motion

【解决方案1】：

不幸的是，我没有时间深入寻找技术答案，但我使用这个Framer-Motion Example 作为指南。

脚步：

在 div 中包裹动画存在。
为动画中最大组件的最大高度添加了 Flex 和固定高度。
为退出动画添加了 0.5 的持续时间
添加了 0.5 的延迟以允许退出动画完成
Before After

这是我使用的沙箱： https://codesandbox.io/s/crazy-forest-5m1p7x?file=/src/App.js

【讨论】：

【解决方案2】：

您需要为 AnimatePresence 组件定义 exitBeforeEnter 属性，这应该可以解决您的问题！

是这样的：

<AnimatePresence exitBeforeEnter initial={false}> 
    <motion.div>....</motion.div>
</AnimatePresence>

【讨论】：

【解决方案3】：

更新：

在 AnimationPresence 组件中添加 mode="wait"

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

【讨论】：

更新 ：

更新：