동적 높이의 부드러운 전환

소개

이 랩에서는 요소의 높이를 알 수 없을 때 요소의 높이를 0에서 auto로 부드럽게 전환하는 방법을 살펴봅니다. 이 기술은 드롭다운 메뉴, 아코디언 및 기타 애니메이션 콘텐츠를 만들 때 유용합니다. CSS transition, max-height, overflow 속성과 JavaScript 를 사용하여 높이 값을 동적으로 설정함으로써 매끄럽고 시각적으로 매력적인 사용자 경험을 만들 수 있습니다.

높이 전환

index.html 및 style.css는 이미 VM 에 제공되었습니다.

이 코드 조각은 다음 단계를 수행하여 요소의 높이를 알 수 없을 때 요소의 높이를 0에서 auto로 전환합니다.

• transition 속성을 사용하여 max-height에 대한 변경 사항이 0.3s 동안 전환되도록 지정합니다.
• overflow 속성을 hidden으로 설정하여 숨겨진 요소의 내용이 컨테이너를 넘치지 않도록 합니다.
• max-height 속성을 사용하여 초기 높이를 0으로 지정합니다.
• :hover 의사 클래스를 사용하여 max-height를 JavaScript 에서 설정한 --max-height 변수의 값으로 변경합니다.
• Element.scrollHeight 속성 및 CSSStyleDeclaration.setProperty() 메서드를 사용하여 --max-height의 값을 요소의 현재 높이로 설정합니다.
• 참고: 이 접근 방식은 각 애니메이션 프레임에서 리플로우 (reflow) 를 발생시키므로, 전환되는 요소 아래에 많은 수의 요소가 있는 경우 지연이 발생할 수 있습니다.

<div class="trigger">
  Hover over me to see a height transition.
  <div class="el">Additional content</div>
</div>

.el {
  transition: max-height 0.3s;
  overflow: hidden;
  max-height: 0;
}

.trigger:hover > .el {
  max-height: var(--max-height);
}

let el = document.querySelector(".el");
let height = el.scrollHeight;
el.style.setProperty("--max-height", height + "px");

오른쪽 하단 모서리에 있는 'Go Live'를 클릭하여 포트 8080 에서 웹 서비스를 실행하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

요약

축하합니다! 높이 전환 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.