[React]애니메이션 넣기(react-transition-group)

[React]애니메이션 넣기(react-transition-group)

애니메이션을 넣을 때 class로 제작하여 컴포넌트 등장 혹은 업데이트 될 때 className을 추가하는 방식으로 넣을 수도 있지만 react-transition-group이라는 라이브러리를 사용하면 transition 속성을 더 편리하게 사용할 수 있다.

react-transition-group 시작하기

react-transition-group 설치하기

react-transition-group 임포트하기

react-transition-group 사용하기

[React]탭메뉴 만들기[React]탭메뉴 만들기 1.UI 만들기 리액트 부트스트랩 사이트의 탭메뉴 UI를 가져온다. Detail.js i...

1.애니메이션을 넣을 부분을 <CSSTransition>으로 감싼다.

Detail.js

        <CSSTransition in={true} classNames="wow" timeout={500}>
          <TabContent 클릭된탭={클릭된탭}/>
        </CSSTransition>

in={true} : 애니메이션 스위치

className="wow" : 클래스명

timeout={500} : 애니메이션 동작 시간(단위:ms)

2.class로 애니메이션을 넣는다.

Detail.scss

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

.wow-enter-active {
  // 애니메이션 동작할 때 적용할 CSS
  opacity: 1;
  transition: all 500ms;
}

3.애니메이션 스위치 상태를 state에 담는다.

Detail.js

let [스위치, 스위치변경] = useState(false);

        <CSSTransition in={스위치} classNames="wow" timeout={500}>
          <TabContent 클릭된탭={클릭된탭}/>
        </CSSTransition>

4.컴포넌트가 등장할 때 스위치를 켠다.

Detail.js

function Detail(props){
...
  <Nav className="mt-5 mb-3" variant="tabs" defaultActiveKey="link-0">
          <Nav.Item>
            <Nav.Link eventKey="link-0" onClick={()=>{스위치변경(false); 클릭된탭변경(0)}}>Tab 1</Nav.Link>
          </Nav.Item>
          <Nav.Item>
            <Nav.Link eventKey="link-1" onClick={()=>{스위치변경(false); 클릭된탭변경(1)}}>Tab 2</Nav.Link>
          </Nav.Item>
          <Nav.Item>
            <Nav.Link eventKey="link-2" onClick={()=>{스위치변경(false); 클릭된탭변경(2)}}>Tab 3</Nav.Link>
          </Nav.Item>
        </Nav>

        <CSSTransition in={스위치} classNames="wow" timeout={500}>
          <TabContent 클릭된탭={클릭된탭} 스위치변경={스위치변경}/>
        </CSSTransition>
...

  function TabContent(props){

    useEffect(()=>{
      props.스위치변경(true);
    })

...
  )
}