[CSS] Transition 작동

메뉴, 리스트 등을 여는 애니메이션을 구현하기 위해서 hight 값을 조작하는 경우가 많다. 

하지만 height 값에 변화는 생기지만 transition이 적용되지 않는 경우가 발생했다. 

 

.menu {
  height: 0; 
  overflow: hidden;
  
  transition: all 0.8s
}

.menu_active {
  heigth: auto
}

이론상 menu 클래스만 가지고 있는 엘리먼트가 menu_active 클래스를 가지게 된다면 

자식 엘리먼트의 height 값 만큼 커지면서 애니메이션이 발생되어야 한다. 

 

하지만 display: none을 했을 때 애니메이션이 발생하지 않는 것처럼 아무런 애니메이션이 작동하지 않았다. 

 

그 이유는 height 값이 auto라면 transition이 작동하지 않는다고 했다. 

그래서 height 값을 계산을 통해 고정적으로 줘야했다.