>

내가 말하는 것에 대한 코드 펜 입니다.

기본적으로 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>


  • 답변 # 1

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

    와이즈 비즈

    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;
    }
    
    

  • 답변 # 2

    답변을 얻는 데 도움이 될 것 같습니다

    <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>

  • 이전 windows - SC 빈 경로 생성 오류
  • 다음 java - JPA에서 최대 열린 커서가 예외를 초과했습니다 (createNativeQuery를 사용하여 레코드 삭제)