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

您可以使用边距代替变换来实现此目的，因为变换只是一种视觉效果，不会更改布局。

注意：变换确实会影响视觉效果，但没有效果除了影响溢出以外，还影响CSS布局。^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>

Answer 2

我想它将帮助您获得答案

const div1 = document.querySelector('.main-div')

function myFunc(e) {
  div1.classList.toggle('animate')
}

.main-div {
  transform: translateY(-350%);
  transition: transform 1s ease;
}
.div1 {
background: red;
}

.div2 {
  background: green;
}

.div3 {
  background: blue;
}

.animate {
  transform: translateY(0%);
}

<button onClick="myFunc()">Toggle</button>
<div class="main-div">
<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>
</div>

为什么即使div没有高度，翻译转换仍会占用空间？

2 个答案: