reactjs - 如何在 React.js 和 Framer Motion 中创建轮播

Question

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

当我这样做时AnimatePresence，第一个 div 会缩小，因为第二个 div 是同时创建的。 在这里您可以看到代码沙箱。

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

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

那我该怎么办？

Answer 1

我使用网格解决它：

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

    ...

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