Height auto/%일 경우 transition이 작동 되지 않는 현상

🚨이슈

메뉴에서 각 메뉴를 클릭하면 서브메뉴가 부드럽게 내려오는 애니메이션을 구현 중 transition이 적용되지 않는 이슈가 발생했다.

height에 auto. % 등을 사용한 상태였는데 이때 특정한 값이 아니면 변화를 인식하지 못한다는 것을 알게 되었다.

🤩 해결

- 기존 코드

.menu .cate-item.on dd {
	height: auto;
}
.menu .cate-item dd {
	height: 0;
	overflow: hidden;
	transition: all .2s ease-in-out;
}

height 값에 특정한 값(px등)이 들어가면 transition이 잘 적용 되지만 auto or %가 들어가면 display:none/block처럼 딱딱하게 움직였다.

- 수정 코드

아래와 같이 height가 아닌 max-height로 수정해 보았다.

.menu .cate-item.on dd {
	max-height: 400px;
}
.menu .cate-item dd {
	max-height: 0;
	overflow: hidden;
	transition: all .2s ease-in-out;
}

height가 아닌 충분한 높이의 max-height 값을 넣어주면 요소가 잘리지도, 딱딱하지도 않은 부드러운 transition이 적용되어 진다.

간단한 부분이지만 앞으로도 유용하게 쓰일것 같다!