transition와 height를 이용하여 애니메이션을 넣기

서론

회사에서 최근에 애니메이션을 특정 state의 변화에 넣어달라는 요청을 받았다. height를 0%로 하였을 때 height가 0이 되는 것들 혹은 내가 만드는 컴포넌트의 높이가 정해져 있는 경우에는 쉽게 구현할 수 있었지만, height를 0으로 할 수 없는 경우나, height를 특정할 수 없는 경우에는 transition을 정하기 어려웠다.

 

시도한 방법

맨 처음에는, hiehgt에 0% 0, 100%를 넣어서 시도해봤었지만 모두 실패였다. react-animation에서는 변할 height를 구해서 inline으로 적용하는 방법을 사용하였다. 하지만, 굳이 이 애니메이션 때문에 라이브러리를 설치하고 싶지는 않아서 마지막으로 max-height를 사용하였다.

 

Max-height

텍스트가 있는 경우에는 overflow:hidden을 사용해야하지만, max-height를 사용하면서 원하는 방식으로 구현을 성공했다!

 

마무리

이런 방법은 사실 고민이 필요했다기 보다는, 알기만하면 구현이 가능한 방법이라 글을 남겨야하나?라고 고민이 들었지만 혹시나 기억이 안나는 경우를 생각해서 글을 작성했다. 사실 작년에도 애니메이션을 구현할 때 height 때문에 animation을 구현할 때 상당히 고생했었던 기억이 있었는데 드디어 해결되어서 +ㅅ+ 기쁘다.