[css, scss] Rotate로 화살표 빙글빙글

요런 거 본 적 있을 거다.

이 화살표를 눌렀을 때, 

이렇게 만들어야 할 일이 생기는데,

어떻게 하면 좋을까?

 

🍕 완성코드

 

Toggle.tsx

import Arrow from "@/public/icon/Arrow.svg";
import styles from "스타일 경로";
import classNames from "classnames/bind";
const cn = classNames.bind(styles);

const Home = () => {
	const [isRotate, setIsRotate] = useState(false);
    const handleArrowClick = () => {
    	setIsRotate(!isRotate);
    };
    
	return (
    	<div>
        	<Arrow 
            	className={cn("arrow", { rotate: isRotate, reRotate: !isRotate })}
            	onClick={handleArrowClick}\
                />
        </div>
    );
};

 

Home.module.scss

// 화살표 회전
.rotate {
  animation: rotateAnimation 0.3s;
  animation-fill-mode: forwards;
}

.reRotate {
  animation: reRotateAnimation 0.3s;
  animation-fill-mode: forwards;
}

@keyframes rotateAnimation {
  to {
    transform: rotate(180deg);
  }
}

@keyframes reRotateAnimation {
  from {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(360deg);
  }
}

 

🍕 사용 방식

useState의 boolean 값에 따라서 

애니메이션이 들어있는 클래스를 땠다 붙였다 하는 것이다.

 

* classnames는 라이브러리이다. 검색 ㄱㄱ