컴포넌트 전환 애니메이션 주는 법

애니메이션 만들고 싶으면

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

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

3. transition 속성도 추가

4. 원할 때 2번 탈부착

이번엔 fade in 애니메이션을 만들어 볼 것.

1. 애니메이션 동작 전 2. 애니메이션 동작 후 className 만들기

.start {
  opacity : 0
}
.end {
  opacity : 1;
}

3. transition 추가

.start {
  opacity : 0
}
.end {
  opacity : 1;
  transition : opacity 0.5s;
}

transition은 해당 속성이 0.5초안에 실행하도록 합니다.

그럼 이제 원하는 <div> 요소에 start 넣어두고 end 를 탈부착할 때 마다 fade in이 된다.

4. 원할 때 end 부착

function TabContent(props){
    let [fade, setFade] = useState('')

    useEffect(()=>{
      setTimeout(()=>{ setFade('end') }, 100)
    return ()=>{
      setFade('')
    }
    }, [props.tab])

    return (<div className={`start ${fade}`}>
      {[<div>내용0</div>, <div>내용1</div>, <div>내용2</div>][props.tab]}
    </div>)
  }