javascript - 为什么即使 div 没有高度，transition with translate 也会占用空间？

Question

这是一个Codepen我正在谈论的内容。

本质上，我想转换一个 div 以平稳地上下移动，但让其他 div 占用它的空间并同时与它一起转换，而无需分别过渡它们。我认为它们会占用空间，因为这些 div 没有高度。但是我错了!

如果你检查空的空间，它没有尺寸，就好像空的空气占据了空间。出于某种原因，其他 div 没有向上移动。

const div1 = document.querySelector('.div1')

function myFunc(e) {
  div1.classList.toggle('animate')
}

.div1 {
  background: red;
  transform: translateY(-200%);
  transition: transform 1s ease;
}

.div2 {
  background: green;
}

.div3 {
  background: blue;
}

.animate {
  transform: translateY(100%);
}

<button onClick="myFunc()">Toggle</button>
<div class="div1">
  <div>
    content
  </div>
  <div>
    content
  </div>
  <div>
    content
  </div>
  <div>
    content
  </div>
</div>
<div class="div2">
  <div>
    content
  </div>
  <div>
    content
  </div>
  <div>
    content
  </div>
  <div>
    content
  </div>
</div>
<div class="div3">
  <div>
    content
  </div>
  <div>
    content
  </div>
  <div>
    content
  </div>
  <div>
    content
  </div>
</div>

Answer 1

您可以使用 margin 而不是 transform 来实现这一点，因为 transform 只是一种视觉效果，不会改变布局。

Note: Transformations do affect the visual rendering, but have no affect on the CSS layout other than affecting overflow.^ref

const div1 = document.querySelector('.div1')

function myFunc(e) {
  div1.classList.toggle('animate')
}

.div1 {
  background: red;
  margin-top:-300px;
  transition: margin 1s ease;
}

.div2 {
  background: green;
}

.div3 {
  background: blue;
}

.animate {
  margin-top:0;
}

<button onClick="myFunc()">Toggle</button>
<div class="div1">
  <div>
    content
  </div>
  <div>
    content
  </div>
  <div>
    content
  </div>
  <div>
    content
  </div>
</div>
<div class="div2">
  <div>
    content
  </div>
  <div>
    content
  </div>
  <div>
    content
  </div>
  <div>
    content
  </div>
</div>
<div class="div3">
  <div>
    content
  </div>
  <div>
    content
  </div>
  <div>
    content
  </div>
  <div>
    content
  </div>
</div>