728x90 반응형 애니메이션1 [프로젝트] React component: 마운트(mount)될 때와 언마운트(unmount)될 때 각기 다른 애니메이션 적용하기 (feat. onanimationend 프로퍼티) 멋진 웹사이트들을 보면 메뉴 버튼을 클릭했을 때 촤라락~🌼하면서 나왔다가 촤라락~🌼하면서 사라지는 경우를 자주 볼 수 있다. 내 프로젝트에도 메뉴가 토글될 때 그러한 애니메이션을 적용하고 싶어서, 가장 처음 시도했던 건 아래와 같이 slide-in 애니메이션을 만들어서 토글되는 메뉴에 적용시키는 것이었다. // Styled-Components의 keyframes이다. // 토글되는 메뉴의 width 길이 만큼 오른쪽에 숨겨놨다가 나오도록 했다 const slideIn = keyframes` from { right: -500px; } to { right: 0; } `; 그런데, 이렇게 단순히 slideIn 애니메이션만을 추가하면, 한가지 문제가 발생한다. 바로, 메뉴를 토글해서 메뉴 컴포넌트가 마운트될 때.. 2021. 9. 1. 이전 1 다음 728x90 반응형
