成帧器运动阻止孩子播放父母的动画

时间:2020-10-07 20:12:50

标签: reactjs framer-motion

我遇到了成帧器运动的问题。我有叠加式模态,我想在动画中叠加一个淡入淡出但模态容器(他的子元素)具有动画并缩放动画(从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中打开模态容器缩放,这将打开模态。我的意思是它从他的中心到固定位置增长)

感谢帮助

1 个答案:

答案 0 :(得分:0)

如果您要问如何没有覆盖比例,则只需要将缩放动画应用于ModalContainer元素,而不是父对象即可。但是在那种情况下,模态仍然会淡入,因为其父元素正在逐渐淡入。那是您想要的吗?

我认为您的解决方案将是使模式不成为叠加层的子级。这样,您可以为覆盖图的不透明度和模态的比例设置动画,而不会影响彼此。

如果您想将它们保留在同一组件中(您可能会这样做),则可以使它们都是同一父元素的兄弟姐妹。

结构上是这样的:

<div>
    <Overlay animate={{opacity: isOpen ? 1 : 0}} />
    <Modal animate={{scale: isOpen ? 1 : 0}} />
</div>