React(58) - 화살표 회전 애니메이션 만들기

새발자는 리액트로 드롭박스를 만드는 중이다. 전체보기를 클릭하면 아래에 촤라락 하위메뉴가 펼쳐진다. 

애니메이션을 추가하여 아주 자연스럽게 화살표를 뱅그르르 회전시켜보자.

 

결과화면 미리보기

[ 전체 보기 ] 버튼 옆에 달린 화살표의 방향 클릭할 때마다 바뀐다. 이 때 회전 애니메이션을 추가해볼 것이다.

---

React(58) - 화살표 회전 애니메이션 만들기

 

 

useState 의 상태값은 스위치 역할을 한다.

클릭할 때마다 메뉴를 펴고 접으면서 화살표 방향이 달라질 것이다. 접힌 상태이기 때문에 기본값은 false 로 두자.

// useState 로 스위치 역할을 할 상태값 변수를 선언해준다. 기본값은 false
const [showCate, setShowCate] = useState<boolean>(false);

 

HTML 

onClick 이벤트를 심어놓아서 스위치인 showCate 가 켜졌다(true) 꺼젔다(false)하게 만들었다.

켜질 때(true)마다 open 이라는 클래스를 추가해주었다. 당연히 꺼지면 open 클래스는 사라진다.

<div
  className={`select-box ${showCate ? 'open' : ''}`} // showCate 가 true 면 open 이라는 클래스가 추가된다.
  onClick={() => setShowCate(!showCate)}	     // 클릭 시에 showCate의 상태값이 바뀐다. (스위치 역할)
>
  전체보기 <img src={icoArrowDown} />
</div>

 

CSS

css 로 open 일 때랑 아닐 때 img 에 애니메이션과 방향을 변경해주자

.select-box img { 		// 화살표 이미지 정방향일 때 
  height: 12px;
  width: 12px;
  transition: all ease 1s;	// 회전 애니메이션 부드럽게 돌아간다.
}
.select-box.open img { 		// 클릭해서 드랍박스가 열릴 때 
  transform: rotate(180deg);	// 화살표가 역방향으로 회전
  transition: all ease 1s; 	// 회전 시 부드럽게 돌아간다.
}

 

결과화면 

아주 잘된다 (아무도 몰라줘도 혼자 해냈다는 내적 뿌듯 🙃 )