Почему переход с переводом занимает место, хотя div не имеет высоты? - PullRequest
Новая
       8

Почему переход с переводом занимает место, хотя div не имеет высоты?

0 голосов
/ 27 июня 2018

Вот 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>

Ответы [ 2 ]

0 голосов
/ 27 июня 2018

Думаю, это поможет вам получить ответ 

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>
0 голосов
/ 27 июня 2018

Вы можете достичь этого, используя поле вместо преобразования, потому что преобразование является только визуальным эффектом и не изменит макет.

Примечание. Преобразования влияют на визуальный рендеринг, но не имеют влияет на макет 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>
...