代码之家 › 专栏 › 技术社区 › Taylor Austin

为什么在DIV没有高度的情况下,translate转换会占用空间?

css-transitions css3 css html javascript

Taylor Austin · 技术社区 · 8 年前

这是一个 Codepen 我在说什么。

基本上我想转换 div 平稳地上下移动 分区 S可以同时使用它的空间和转换,而不必单独转换它们。我想他们会占用空间,因为这些 分区 S没有高度。但我错了!

如果你检查这个空的空间,它没有任何尺寸,就像是空的空气占据了这个空间。因为某种原因另一个 分区 S没有向上移动。

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>

2 回复 | 直到 8 年前

Temani Afif 8 年前

您可以使用边界而不是转换来实现这一点,因为转换只是 视觉的 效果,不会更改布局。

注意:转换确实会影响视觉呈现,但没有影响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>

Anil Suwal Qode 8 年前

我想这会帮助你得到答案

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>