如何在 React.js 和 Framer Motion 中创建旋转木马

Question

我想在 React.js 中使用 Framer Motion 创建动画轮播。 这个想法是在单击按钮时看到两个 div 彼此水平变化。

当我使用 AnimatePresence 执行此操作时，第一个 div 缩小，因为第二个 div 是同时创建的。 Here可以看到代码沙箱了

我已经尝试使用 exitBeforeEnter 道具，但它不适用于我的用例。我想看到两个一起变化的div。使用 exitBeforeEnter，这是不可能的。

我也试过将Slide组件的位置设为absolute。这样做的问题是，容器的所有 flex 属性都丢失了。容器不会根据 Slide 组件调整它的高度。

那我该怎么做呢？

Answer 1

我用网格求解：

      <div
        class="container"
        style={{
          height: 400,
          display: "grid"
        }}
      >

    ...

    <motion.div
      style={{
        gridArea: "1 / 1 / 2 / 2",
        ...
      }}
    >