如何解决折叠时两个div之间的空白问题

Question

我希望解决这个图片中的问题： 如何解决红色和紫色 div 折叠时的空白间隔！ 是否因为透视属性？ 非常感谢！

div {
  width: 200px;
  height: 100px;
  background: #333;
}

.fold-div {
  position: relative;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

#div1 {
  background: #d94f5c;
  animation-name: fold-top;
  transform-origin: top;
}

#div2 {
  background: #742fad;
  animation-name: fold-bottom;
  transform-origin: bottom;
}

@keyframes fold-top {
  100% {
    transform: perspective(50px) rotateX(-8deg);
    height: 0;
  }
}

@keyframes fold-bottom {
  100% {
    transform: perspective(50px) rotateX(8deg);
    height: 0;
  }
}

<div></div>
<div class="fold-div" id="div1"></div>
<div class="fold-div" id="div2"></div>
<div></div>

- kelen

---

由于rotateX的缘故，方块的视觉高度小于实际高度。根据我的计算，例如，在动画进行到一半时，感知高度将是4度余弦值的0.9975或计算高度的99.75％（此时为50px）。然而，这与我们看到的间隙大小不符。嗯。 - Mr Lister

Answer 1

我刚刚添加了一个负边距来解决这个问题。请查看代码片段。

div {
  width: 200px;
  height: 100px;
  background: #333;
}

.fold-div {
  position: relative;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

#div1 {
  background: #d94f5c;
  animation-name: fold-top;
  transform-origin: top;
  margin-bottom: -10px; // negative margin
}

#div2 {
  background: #742fad;
  animation-name: fold-bottom;
  transform-origin: bottom;
}

@keyframes fold-top {
  100% {
    transform: perspective(50px) rotateX(-8deg);
    height: 0;
    margin-bottom: 0; // reset margin to 0 to avoid a glitch bug 
  }
}

@keyframes fold-bottom {
  100% {
    transform: perspective(50px) rotateX(8deg);
    height: 0;
  }
}

<div></div>
<div class="fold-div" id="div1"></div>
<div class="fold-div" id="div2"></div>
<div></div>

- Jinu Kurian

---

如果您的问题已经解决，请考虑为此答案点赞和接受它。 - Jinu Kurian

Answer 2

受Jinu Kurian的启发，我通过在动画开始时使用margin-bottom -10px来解决问题！！！非常感谢Jinu Kurian！！！

div {
  width: 200px;
  height: 100px;
  background: #333;
}

.fold-div {
  position: relative;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

#div1 {
  background: #d94f5c;
  animation-name: fold-top;
  transform-origin: top;
}

#div2 {
  background: #742fad;
  animation-name: fold-bottom;
  transform-origin: bottom;
}

@keyframes fold-top {
  0% {
    margin-bottom: -10px;  // when animate, margin-bottom -10px
  }
  100% {
    transform: perspective(50px) rotateX(-8deg);
    height: 0;
  }
}

@keyframes fold-bottom {
  100% {
    transform: perspective(50px) rotateX(8deg);
    height: 0;
  }
}


thanks's Jinu Kurian, inspire by the idea, i resolve it when start animation 0% {
   margin-bottom: -10px
}

<div>
</div>
<div class="fold-div" id="div1"></div>
<div class="fold-div" id="div2"></div>
<div></div>

- kelen