我遇到了成帧器运动的问题。我有叠加式模态,我想在动画中叠加一个淡入淡出但模态容器(他的子元素)具有动画并缩放动画(从1px的宽度和高度到100vh和100vw)。我想防止重叠缩放,而只是通过动画来改变他的不透明度。您有什么主意如何防止孩子观看父母的动画?
我是初学者,所以很抱歉代码可能很烂:D </ p>
我的代码:
<motion.div
layout
data-isOpen={isOpen}
className="parent"
ref={modalRef}
>
<ModalContainer
initial={{opacity:0}}
animate={animate}
>
<div className="w-100 d-flex justify-content-end">
<Close
onClick={() => {
closeModal();
clearAllBodyScrollLocks(modalRef);
}}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20.39 20.39"
>
<title>close</title>
<line
x1="16.39"
y1="16.39"
x2="4"
y2="4"
fill="none"
stroke="#000000"
strokeLinecap="round"
strokeMiterlimit="10"
strokeWidth="1"
/>
<line
x1="4"
y1="16.39"
x2="16.39"
y2="4"
fill="none"
stroke="#000000"
strokeLinecap="round"
strokeMiterlimit="10"
strokeWidth="1"
/>
</Close>
</div>
{children}
</ModalContainer>
</motion.div>
父类:
.parent{
width: 1px;
height: 1px;
position: absolute;
justify-content: center;
align-items: center;
overflow: auto;
border-radius: 2%;
}
.parent[data-isOpen="true"] {
display: block;
background-color: rgba(0,0,0,0.3);
margin: auto;
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left:0;
z-index:2;
border-radius: 2%;
padding: 4rem 0;
}
免责声明:如果您有任何其他方法来改善它,请告诉我(我只有一个要求,可以从button中打开模态容器缩放,这将打开模态。我的意思是它从他的中心到固定位置增长)
感谢帮助
答案 0 :(得分:0)
如果您要问如何没有覆盖比例,则只需要将缩放动画应用于ModalContainer
元素,而不是父对象即可。但是在那种情况下,模态仍然会淡入,因为其父元素正在逐渐淡入。那是您想要的吗?
我认为您的解决方案将是使模式不成为叠加层的子级。这样,您可以为覆盖图的不透明度和模态的比例设置动画,而不会影响彼此。
如果您想将它们保留在同一组件中(您可能会这样做),则可以使它们都是同一父元素的兄弟姐妹。
结构上是这样的:
<div>
<Overlay animate={{opacity: isOpen ? 1 : 0}} />
<Modal animate={{scale: isOpen ? 1 : 0}} />
</div>