问题描述
我想在React.js中使用Framer Motion创建一个动画轮播。 这样做的目的是在单击按钮时看到两个div彼此水平地变化。
当我使用AnimatePresence执行此操作时，第一个div会缩小，因为第二个div是同时创建的。
Here，您可以看到代码沙箱。
我已经尝试使用exitBeforeEnter属性，但不适用于我的用例。我想同时看到两个变化的div。使用exitBeforeEnter，这是不可能的。
我还尝试将Slide组件的位置设置为absolute。问题在于，容器的所有flex属性都将丢失。容器不能适应它的高度，具体取决于Slide组件。
那我该怎么办？
解决方法
我使用网格解决它：
<div
class="container"
style={{
height: 400,display: "grid"
}}
>
...
<motion.div
style={{
gridArea: "1 / 1 / 2 / 2",...
}}
>