成帧器运动防止孩子观看父母的动画

Question

我遇到了 framer-motion 的问题。我有带叠加的模态，我想叠加有一个淡入淡出的动画，但模态容器（他的子元素）有和缩放动画（从 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;
}

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

感谢您的帮助

Answer 1

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

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

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

结构上是这样的：

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