목록Transition (1)

Bleeding edge

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

서론 회사에서 최근에 애니메이션을 특정 state의 변화에 넣어달라는 요청을 받았다. height를 0%로 하였을 때 height가 0이 되는 것들 혹은 내가 만드는 컴포넌트의 높이가 정해져 있는 경우에는 쉽게 구현할 수 있었지만, height를 0으로 할 수 없는 경우나, height를 특정할 수 없는 경우에는 transition을 정하기 어려웠다. 시도한 방법 맨 처음에는, hiehgt에 0% 0, 100%를 넣어서 시도해봤었지만 모두 실패였다. react-animation에서는 변할 height를 구해서 inline으로 적용하는 방법을 사용하였다. 하지만, 굳이 이 애니메이션 때문에 라이브러리를 설치하고 싶지는 않아서 마지막으로 max-height를 사용하였다. Max-height 텍스트가 있는 경..
HTML & CSS 2023. 5. 6. 13:01
이전 Prev 1 Next 다음