如何解决如何在React.js和Framer Motion中创建轮播
我想在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",...
}}
>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。