[HTML/CSS] css height: auto인 요소에 transition 적용하기

# 이슈

아코디언이나 드롭다운 메뉴 처럼 active시 인터렉션을 적용하는 경우간단하게 transiton을 사용 할 때가 많은데,height가 auto인 요소의 경우 transition이 적용되지 않는다.

 

# 방안

스크립트 사용이 부담되어 css만으로 처리하고 싶은 경우

max-height를 활용하는 방법이 있다.

.element {
  overflow: hidden;
  height: auto;
  max-height: 0; /* 초기 상태 */
  transition: 0.2s;
}

.element.active {
  max-height: 500px; /* (예상 최대 높이) */
}

 

transition은 시작과 끝이 명확한 속성에 대해서 작동한다.

 

height: auto인 경우 브라우져가 값을 가늠 할 수 없기 때문에,

max-height를 사용해 끝을 정해주면 동작할 수 있게되는 원리다.