useState ➡️ 해당 내역이 바뀌면 렌더링 🟰 렌더링할 최소 단위에 붙이기
App.tsx에서는 component만 넣기 ➡️ useState 동작 시 모든 페이지에서 렌더링 일어남fadeIn, fadeOut animation
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeout {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
fadeInUp, fadeOutDown animation
@keyframes fadeInUp {
from {
opacity: 0;
transform: translate3d(-50%, 100%, 0);
}
to {
opacity: 1;
transform: translate(-50%, 0);
}
}
@keyframes fadeOutDown {
from {
opacity: 1;
transform: translate(-50%, 0);
}
to {
opacity: 0;
transform: translate3d(-50%, 100%, 0);
}
}
useRef로 animation style 변경하기
const closeIntroduce = (
props: IntroduceProps,
closeRef: React.RefObject<HTMLDivElement>
) => {
const onAnimationEnd = () => {
if (closeRef.current) {
props.view[1](!props.view[0]); // 안보이게 바꾸기
closeRef.current.removeEventListener('animationend', onAnimationEnd);
// 애니메이션 끝나고 removeEventListener
}
};
if (closeRef.current) {
closeRef.current.addEventListener('animationend', onAnimationEnd);
// animation 끝나면 onAnimationEnd 함수 실행
closeRef.current.style.setProperty('animation', 'fadeout 0.7s forwards');
// fadeout의 keyframe animation을 0.7초 실행한 후 'forwards'로 마지막 상태 유지
// ➡️ 이거 안하면 다시 초기상태로 돌아감 🟰 안없어짐
}
};