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

Question

我想用React.js中的Framer Motion创建一个动画旋转木马。其思想是在单击按钮时看到两个div在水平方向上彼此变化。

当我使用AnimatePresence这样做时，第一个div会收缩，因为第二个div是同时创建的。Here你可以看到代码沙箱。

我已经尝试过使用exitBeforeEnter prop，但它不适用于我的用例。我希望看到这两个div一起变化。对于exitBeforeEnter，这是不可能的。

我还尝试将Slide组件的位置设置为absolute。这样做的问题是，容器的所有flex属性都会丢失。容器不适应它的高度依赖于Slide组件。

那我怎么做呢？

Answer 1

我使用网格来解决它：

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

    ...

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