스위치 애니메이션 on redgoose note

스위치 애니메이션

Nest: Blog Category: Diary 2021-05-07

May-07-2021-18-35-40.gif

스위치 컴포넌트를 만들때가 와서 하나 작업중에 있는데 좀더 아이폰에 가까운 애니메이션으로 구현해 보았다.
이리저리 삽질한 결과 완벽하게 애니메이션을 만들지 못했다.

속성의 종류선택과 그 속성의 특징과 한계들을 맛보면서 이정도까지 만들어냈다.
대부분의 속성은 제대로 된 퍼포먼스를 내지 못하지만 사이즈가 작아서 그나마 다행이라고 본다. ㅠㅠ
중간 핸들이 움직이는 애니메이션이 없지만 사이즈가 작고 버튼을 누르고 있을때 가로 사이즈가 늘어나는 장치로 핸들이 애니메이션이 되는듯한 착각을 이용한 셈이다. ㅎㅎ

css 특징과 한계를 다시한번 겪으면서 한편으로는 좀 개선좀 됐으면 하는 바램도 생긴다. ;

transform: width(10px)이랑 transform: height(10px) 이거 좀 나와주세요 ㅠㅠ