animation(CSSTransition)

css의 transition 속성을 이용하여 css를 천천히 변하도록 한다.

 

아래 모듈 설치한다.

yarn add react-transition-group

 

필요한 속성을 임포트한다.

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

 

애니메이션을 적용하고자 하는 컴포넌트를 아래처럼 감싼다.

각 파라미터의 의미는

in => 발동 조건(true or false)

classNames => 애니메이션을 위한 css의 접두어

timeout => 최대 길이. timeout이 css에 설정된 transition값보다 작을 경우, timeout 시간이 지나면 자동으로 css 적용이 완료된다.

<CSSTransition in={onSwitch} classNames="wow" timeout={500}>
	<TabContent selectTab={selectTab} setOnSwitch={setOnSwitch}/>
</CSSTransition>

적용을 위한 css는 아래처럼 작성한다. classNames를 wow로 해놨기 때문에 css 작성의 접두어는 wow로 만들어야 하며, 이름규칙은 결정되어 있는대로 따른다. 가령 아래처럼 지정하면 wow-enter는 자동으로 애니메이션 시작시 적용되고 wow-enter-active는 실제 동작할 때 적용된다. 두가지 외에도 여러가지 많으니 css transition 을 따로 공부하자.

// 애니메이션 시작점
.wow-enter {
    opacity: 0;
}
// 애니메이션 동작할 때
.wow-enter-active {
    opacity: 1;
    transition: all 500ms;	// 이 옵션을 설정하지 않으면 애니메이션 X
}