반응형
새발자는 리액트로 드롭박스를 만드는 중이다. 전체보기를 클릭하면 아래에 촤라락 하위메뉴가 펼쳐진다.
애니메이션을 추가하여 아주 자연스럽게 화살표를 뱅그르르 회전시켜보자.
결과화면 미리보기
[ 전체 보기 ] 버튼 옆에 달린 화살표의 방향 클릭할 때마다 바뀐다. 이 때 회전 애니메이션을 추가해볼 것이다.
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; // 회전 시 부드럽게 돌아간다.
}
결과화면
아주 잘된다 (아무도 몰라줘도 혼자 해냈다는 내적 뿌듯 🙃 )
반응형
'React' 카테고리의 다른 글
Styled-components(5) first-child와 last-child 사용하기 (0) | 2022.02.14 |
---|---|
React(59) 맵(Map) 사용하기 - set / get / has / delete / clear / size (0) | 2022.02.04 |
React(57) Redux 로 객체배열 저장하기 (redux 상태관리) (0) | 2022.02.01 |
React(56) a 태그에서 onClick 이벤트 사용하기 (무효화) (2) | 2022.01.30 |
Styled-components(4) 배열로 된 div를 2열로 나열하기 (0) | 2022.01.17 |
댓글