CSS 접기 펴기 애니메이션 만드는 방법 (height: auto 일 때 문제 해결)

접기, 펴기 애니메이션 만드는 방법

• CSS transition 을 이용하여 애니메이션 효과를 입힌다.
• JS 를 이용해 height 값을 동적으로 조정해준다.

div {
  transition: 3s;
  height: 500px; /* -> 50px 와 같이 변경하면 애니메이션이 적용된다. */
}

그런데 위의 방법의 경우, height 값이 auto 일 때 애니메이션이 적용되지 않는 문제가 생긴다. 해당 엘리먼트에 들어올 값이 유동적이어서 height 값이 auto 여야 하는 경우엔 max-height 을 이용해줌으로써 애니메이션을 적용할 수 있다.

주의! height 쓰지 말고 오직 max-height 만을 이용해서 크기를 제어해야 애니메이션이 먹힌다.

레퍼런스

https://stackoverflow.com/questions/13938460/css-transition-auto-height-not-working