CSS Transition Height 100% 를 주는 방법

요소의 높이를 100%로 늘리는 애니메이션을 만들려면 다음과 같은 단계를 따르면 됩니다:

1. 요소에 대한 CSS 속성을 설정합니다. 이때 요소는 상위 요소(부모 요소)의 크기를 기준으로 높이를 조정합니다.

.parent {
  height: 400px; /* 부모 요소의 높이 */
}

.child {
  height: 0; /* 자식 요소의 초기 높이 */
  transition: height 0.5s ease-in-out; /* 높이가 바뀔 때 애니메이션 속성 */
}

2. 자식 요소의 높이를 100%로 늘리는 애니메이션을 작성합니다. 이때 자식 요소의 높이를 100%로 설정하면 부모 요소의 높이와 동일하게 됩니다.

.child.active {
  height: 100%; /* 자식 요소의 높이를 100%로 설정 */
}

3. 자바스크립트를 사용하여 자식 요소에 클래스를 추가하여 애니메이션을 트리거합니다.

이렇게 하면 자식 요소를 클릭할 때마다 높이가 0에서 100%로 늘어나는 애니메이션을 볼 수 있습니다. 애니메이션을 더 다양하게 구현하려면 CSS transition 속성을 변경하거나 자바스크립트에서 요소의 높이를 조작할 수 있습니다.

const childElement = document.querySelector('.child');

function toggleHeight() {
  childElement.classList.toggle('active');
}

childElement.addEventListener('click', toggleHeight);

4. transition 속성으로 height: 100%를 설정하면, 트랜지션을 적용할 때 요소의 높이가 부모 요소의 높이에 의존하므로 일반적으로 제대로 작동하지 않습니다. 이러한 경우에는 다른 방법으로 애니메이션을 구현해야 합니다.

1. 요소가 고정된 높이를 가지고 있을 때, max-height 속성을 사용하여 애니메이션을 구현할 수 있습니다. 이 방법은 요소가 특정 높이 이하에서만 작동합니다.

.element {
  overflow: hidden; /* 요소 내부 내용이 넘칠 때 숨김 처리 */
  max-height: 0; /* 초기 상태는 높이가 0 */
  transition: max-height 0.5s ease-in-out; /* max-height를 변경할 때 애니메이션 속성 */
}

.element.active {
  max-height: 500px; /* 애니메이션 동작 시 높이를 500px로 변경 */
}

2. 요소가 유동적인 높이를 가질 때, transform 속성을 사용하여 scaleY를 변경하면서 애니메이션을 구현할 수 있습니다. 이 방법은 요소가 어떤 높이에서든 작동합니다.

.element {  
transform-origin: top; /\* 요소의 상단에서 기준으로 축을 설정 _/  
transform: scaleY(0); /_ 초기 상태는 높이가 0 _/  
transition: transform 0.5s ease-in-out; /_ scaleY를 변경할 때 애니메이션 속성 \*/  
}

.element.active {  
transform: scaleY(1); /\* 애니메이션 동작 시 높이를 100%로 변경 \*/  
}

이러한 방법 중에서, transform 속성을 사용한 방법이 일반적으로 요소의 높이에 관계없이 더욱 정확하게 애니메이션을 구현할 수 있습니다. 하지만, 요소의 내용이 많아질 경우, transform 속성을 사용할 때 성능 문제가 발생할 수 있으므로 이점을 고려해보아야 합니다.