[코딩애플;React]전환 애니메이션 만들기

1.애니메이션 동작 전 스타일과 동작 후 스타일을 담을 className 만들기

:css에서 작성해주기.

.start {

  opacity : 0;

}

.end {

  opacity: 1;

  transition : opacity 0.5s;

}

 

 

2.원할 때 탈부착 하기

-fade state하나 만들고 state에 따라서 className이 보일지 만들기.

=탭이 변경할 때 마다 className 탈부착.

  function TabContent({탭}){

    let [fade, setFade] =useState('')//탭 애니메이션 효과 담는 state

    useEffect(()=>{

      let a = setTimeout(()=>{setFade('end');},100) //end를 붙는 시점을 살짝 0.01초 뒤로 미뤄줌

      return() =>{

        clearTimeout(a)

        setFade('') //클리너함수로 맨처음 클래스명 지워지도록 하기

      }

    },[탭])

    return (

    <div className ={'start '+ fade}>

      {[<div>내용0</div>,<div>내용1</div>,<div>내용2</div>][탭]}

    </div>

    )

  }

 

 

*setTimeout쓰는 이유

:리액트 18버전 부터는 automatic batch라는 기능이 생겼는데, state 변경함수를 연달아 처리해야 하면 다 처리한 후 랜더링은 한번만 작동됨. 그래서 따로 setTimeout을 이용하여 시간을 늦춰주는 것.

 

📚Detail화면도 천천히 서서히 보여지도록 해보기.

    let [ani, setAni]=useState(''); //state선

   

    useEffect(()=>{

      let a = setTimeout(()=>{setAni('end');},100) //end를 붙는 시점을 살짝 0.01초 뒤로 미뤄줌

      return() =>{

        clearTimeout(a)

        setAni('') //클리너함수로 맨처음 클래스명 지워지도록 하기

      }

    },[props.ani])

 

 <div className={"container start "+ani}> //클래스 네임 변경할 수 있도록 적어주기