0

我遇到了成帧器运动的问题。我有带叠加的模态，我想叠加有一个淡入淡出的动画，但模态容器（他的子元素）有和缩放动画（从 1px 宽度和高度到 100vh 和 100vw）。我想防止以某种方式覆盖缩放，并通过动画改变他的不透明度。您对如何防止孩子观看父母的动画有任何想法吗？

我是 framer-motion 的初学者，很抱歉可能是糟糕的代码：D

我的代码：

<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;
}

免责声明：如果您有任何其他想法如何让它变得更好，请告诉我（我只有一个要求从打开模式的按钮进行模态容器缩放。我的意思是它从他的中心增长到固定位置）

感谢帮助

4

1 回答 1

0

如果您问如何没有覆盖比例，那么您只需要将缩放动画应用于ModalContainer元素，而不是父元素。但在这种情况下，模式仍然会淡入，因为它的父元素正在淡入。这是你想要的吗？

我认为您的解决方案是不要让模态成为叠加层的子项。这样，您可以为覆盖的不透明度和模态的比例设置动画，而不会影响另一个。

如果你想把它们放在同一个组件中（你可能会这样做），你可以让它们都是同一个父元素的兄弟姐妹。

从结构上讲，是这样的：

<div>
    <Overlay animate={{opacity: isOpen ? 1 : 0}} />
    <Modal animate={{scale: isOpen ? 1 : 0}} />
</div>
于 2020-10-07T22:38:26.483 回答