토글 버튼을 자연스럽게 구현하기

문제

토글 버튼을 구현할이 생기게 되었다. 이때 가상 선택자를 활용해서 active일 때 토글버튼을 회전시킬 생각이었다. 하지만 계속 클릭하고 있는 상태에서만 회전이 유지되고 클릭을 해제한다면 다시 원래대로 돌아왔다. 따라서 내가 원하는 결과로 되지 않았다.

사용자 지정 css 사용하기

rotate 속성에 직접 접근을 해서 js로 변경을 한다면 좋을것 같았다.
여러가지 방법을 찾다가 사용자 지정 css 속성을 사용해보았다.

이것을 사용한다면 e.currentTarget.style.setProperty("--toggle", "90deg"); 이러한 방식으로 js로 css속성값을 변경할 수 있었다.

./style.css   

transition: transform 200ms ease-out 0s;
transform: rotateZ(var(--toggle));

결과

아래처럼 부드럽게 나오는것을 확인할 수 있다.

다음 할일

토글 버튼을 눌렀을 때 페이지도 들어갔다가 나오게 구현해야한다.