javascript - div에 높이가 없어도 변환을 통한 전환이 공간을 차지하는 이유는 무엇입니까?

변환은시각적효과이며 레이아웃을 변경하지 않기 때문에 변환 대신 마진을 사용하여이 작업을 수행 할 수 있습니다.

와이즈 비즈

 
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>

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>