[React] 모달 창 닫힐때 Animation 주기

모달창이 닫힐 때 에니메이션을 주기 위해 우선 모달창을 제어하는 state를 제외하고 에니메이션을 제어 할 state를 하나 더 만들어주었다.

 

 const [animationOn, setAnimationOn] = useState<boolean>(false)

이후 닫기 버튼 클릭 시 animationOn을 true로 바꿔주고, 

 

setTimeout을 사용하여 0.5초 후 animationOn과 modalOpen을 false로 바꿔주면 된다. 

 

 setAnimationOn(true)
      setTimeout(() => {
        setAnimationOn(false)
        setModalOpen(false)
      }, 500)

 

animationOn이 true로 설정되어 있을 때, 아래와 같이 에니메이션 css를 적용해주어 효과를 입힐 수 있었다.ㅁ

 

${(props) =>
        props.animationOn === true &&
        css`
          transition: 0.25s all ease-in;
          transform: translateX(-450px);
        `}