react-transition-group을 이용해 animation 이벤트 구현하기

라이브러리를 사용해 컴포넌트 등장 / 업데이트 시 transition을 쉽게 줄 수 있다.

yarn add react-transition-group

https://reactcommunity.org/react-transition-group/

1. 상단에 import 시켜준다.

import { CSSTransition } from 'react-transition-group'

2. CSSTransition 으로 애니메이션이 필요한 곳을 감싸준다.

<CSSTransition in={true} classNames="tabUI" timeout={500}>
  <TabContent tab={tab} />
</CSSTransition>
  

in={true} : 애니메이션을 켜는 스위치 (true면 동작함)
classNames="tabUI" : 스타일을 주기 위해 입력
timeout={500} : 애니메이션이 몇 초 동안 동작 할 것인지

3. 스타일은 다음과 같이 작성해준다.

Detail.scss

  .tabUI-enter {
    // 애니메이션 시작 때 적용할 CSS
    opacity: 0;
  }
  .tabUI-enter-active {
    // 애니메이션 동작 때 적용할 CSS
    opacity: 1;
  }
  

4. 원할 때 스위치 켜기

버튼을 누르면 스위치를 끔
컴포넌트 로드 / 업데이트 시 스위치 켬

     let [animationSwitch, setAnimationSwitch] = useState(false)
     ...
     ...

      <Nav className="mt-5" variant="tabs" defaultActiveKey="link-0">
        <Nav.Item>
          <Nav.Link
            eventKey="link-0"
            onClick={() => {
              setAnimationSwitch(false)
              setTab(0)
            }}
          >
            Active
          </Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link
            eventKey="link-1"
            onClick={() => {
              setAnimationSwitch(false)
              setTab(1)
            }}
          >
            Option 2
          </Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link
            eventKey="link-2"
            onClick={() => {
              setAnimationSwitch(false)
              setTab(2)
            }}
          >
            Option 2
          </Nav.Link>
        </Nav.Item>
      </Nav>
      
      ...
      ...
      
      function TabContent(props) {
        useEffect(() => {
          props.setAnimationSwitch(true)
        })
        if (props.tab === 0) return <div>0</div>
        else if (props.tab === 1) return <div>1</div>
        else return <div>2</div>
      }

++ enter 말고 exit 애니메이션도 가능하다 (퇴장 할 시)