CSS를 사용하여 높이를 0에서 자동으로 전환

CSS를 사용하여 0에서 자동으로 부드러운 높이 전환

CSS와 HTML

<style>
  #child {
    height: 0;
    overflow: hidden;
    background-color: #dedede;
    transition: height 1s ease;
  }
  #parent:hover #child {
    height: 100px; /* Set this to the max height you expect */
  }
</style>
<div id="parent">
  <h1>Hover me</h1>
  <div id="child">
    Some content<br>
    Some content<br>
    Some content<br>
  </div>
</div>

부드러운 높이 전환을 위한 JavaScript 솔루션

HTML, CSS, 자바스크립트

<style>
  #child {
    height: 0;
    overflow: hidden;
    background-color: #dedede;
    transition: height 1s ease;
  }
</style>
<div id="parent">
  <h1>Hover me</h1>
  <div id="child">
    Some content<br>
    Some content<br>
    Some content<br>
  </div>
</div>
<script>
  const parent = document.getElementById('parent');
  const child = document.getElementById('child');
  parent.addEventListener('mouseenter', () => {
    child.style.height = child.scrollHeight + 'px';
  });
  parent.addEventListener('mouseleave', () => {
    child.style.height = '0';
  });
</script>

CSS 변수를 사용한 부드러운 높이 전환

CSS와 HTML

<style>
  :root {
    --max-height: 100px;
  }
  #child {
    height: 0;
    overflow: hidden;
    background-color: #dedede;
    transition: height 1s ease;
  }
  #parent:hover #child {
    height: var(--max-height);
  }
</style>
<div id="parent">
  <h1>Hover me</h1>
  <div id="child">
    Some content<br>
    Some content<br>
    Some content<br>
  </div>
</div>

CSS 전환 및 애니메이션에 대해 자주 묻는 질문

1. CSS를 사용하여 높이를 0에서 자동으로 어떻게 전환할 수 있나요?
2. 이를 달성하려면 고정 높이와 JavaScript 높이 값을 동적으로 설정합니다. 순수한 CSS 솔루션은 다음과 같은 이유로 제한됩니다. height: auto 직접 애니메이션할 수 없습니다.
3. CSS에서 전환과 애니메이션의 차이점은 무엇입니까?
4. CSS 전환은 일반적으로 마우스 오버와 같은 상태 변경 시 한 상태에서 다른 상태로 속성 값을 (지정된 기간 동안) 원활하게 변경하는 방법을 제공합니다. CSS 애니메이션에서는 키프레임을 사용하여 상태와 타이밍을 정의하는 보다 복잡한 시퀀스를 허용합니다.
5. 동적 높이가 있는 요소에 CSS 전환을 사용할 수 있나요?
6. 예, 하지만 일반적으로 높이를 미리 계산하거나 JavaScript를 사용하여 원활한 전환을 위해 높이 값을 동적으로 설정해야 합니다.
7. 의 목적은 무엇입니까? overflow: hidden; CSS 전환의 속성?
8. 그만큼 overflow: hidden; 속성은 요소의 경계를 초과하는 모든 콘텐츠를 숨기는 데 사용됩니다. 이는 높이 변경과 관련된 깔끔한 전환에 필수적입니다.
9. 어떻게 keyframes CSS 애니메이션 작업을 하시나요?
10. Keyframes CSS 애니메이션에서는 애니메이션 중 다양한 지점에서 요소의 상태를 정의할 수 있습니다. 각 키프레임에서 속성과 해당 값을 지정하여 복잡한 애니메이션을 만들 수 있습니다.
11. CSS 전환과 애니메이션을 결합할 수 있나요?
12. 예, CSS 전환과 애니메이션을 결합하면 상태 변경과 연속 애니메이션을 모두 처리하여 더욱 풍부한 사용자 경험을 제공할 수 있습니다.
13. 무엇인가요 scrollHeight 자바스크립트로?
14. scrollHeight 오버플로로 인해 화면에 표시되지 않는 콘텐츠를 포함하여 요소의 전체 높이를 반환합니다. 부드러운 전환을 위해 동적 높이를 계산하는 데 유용합니다.
15. 어떻게 animation-delay 일하다?
16. 그만큼 animation-delay 속성은 애니메이션이 시작되어야 하는 시기를 지정합니다. 이를 통해 계층화된 효과를 위해 여러 애니메이션의 순서를 지정할 수 있습니다.
17. 왜? :root CSS에서 사용됩니까?
18. 그만큼 :root 의사 클래스는 문서의 루트 요소를 대상으로 합니다. 일반적으로 스타일시트 전체에서 재사용할 수 있는 전역 CSS 변수를 정의하는 데 사용됩니다.

부드러운 높이 전환에 대한 최종 생각

CSS에서 높이 0에서 자동으로 부드럽게 전환하려면 여러 가지 기술이 필요합니다. 순수 CSS는 단순성을 제공하지만 미리 정의된 높이의 필요성으로 인해 제한됩니다. JavaScript를 통합하면 높이를 동적으로 계산하고 설정할 수 있어 원활한 전환이 가능합니다. CSS 변수를 활용하면 동적 값을 관리하는 유연한 접근 방식을 제공할 수도 있습니다. 이러한 방법을 결합하면 개발자는 일반적으로 높이 전환과 관련된 갑작스러운 변화 없이 더욱 상호 작용적이고 매력적인 웹 경험을 만들 수 있습니다.