애니메이션 반응 구성 요소가 필요한 경우 react-pose 또는 react-spring 과 같은 라이브러리를 사용할 수 있습니다. 이러한 라이브러리는 매우 훌륭하지만 작은 전환만 필요한 경우 너무 무겁습니다.

반면에 react-transition-group은 너무 간단합니다.
styled-componets를 사용하면 <Transition> 구성 요소가 <CSSTransition>보다 나을 수 있습니다.

예시

먼저 전환 래핑 구성 요소를 만듭니다.
이 예제에서는 React Hooks를 사용하지만 필요한 경우 클래스 구성 요소를 사용할 수 있습니다.

import { Transition } from "react-transition-group"
import { Animation } from "./Animation"

export const AnimateItem = () => {
  const [animate, setAnimate] = useState(false)

  // Animate on click button and revert after 3000ms.
  const doAnimate = useCallback(() => {
    setAnimate(true)
    setTimeout(() => {
      setAnimate(false)
    }, 3000)
  }, [])

  return (
    <div>
      {/* Transition change state with `in` props */}
      <Transition in={animate} timeout={500}>
        {(state) => (
          // state change: exited -> entering -> entered -> exiting -> exited
          <Animation state={state}>Hello</Animation>
        )}
      </Transition>
      <button onClick={doAnimate}>Animate</button>
    </div>
  )
}

다음으로 styled-component를 기반으로 구성 요소를 만듭니다.

// Animation.js
import styled from "styled-components"

export const Animation = styled.div`
  transition: 0.5s;
  width: 300px;
  height: 200px;
  /* example for move item */
  transform: translateX(
    ${({ state }) => (state === "entering" || state === "entered" ? 400 : 0)}px
  );
  /* change color*/
  background: ${({ state }) => {
    switch (state) {
      case "entering":
        return "red"
      case "entered":
        return "blue"
      case "exiting":
        return "green"
      case "exited":
        return "yellow"
    }
  }};
`

Item 및 Animation도 분할할 수 있습니다.

const BaseItem = styled.div`
  width: 300px;
  height: 200px;
`

export const Animation = styled(BaseItem)`
  transition: 0.5s;
  transform: translateX(
    ${({ state }) => (state === "entering" || state === "entered" ? 400 : 0)}px
  );
`

시사

페이드 예시

같은 방법으로 fadeIn/fadeOut 애니메이션을 만들 수 있습니다.

export const Fade = styled.div`
  transition: 0.5s;
  opacity: ${({ state }) => (state === "entered" ? 1 : 0)};
  display: ${({ state }) => (state === "exited" ? "none" : "block")};
`

또는 unmountOnExit 및 mountOnEnter 와 함께 사용할 수 있습니다.

export const Fade2 = styled.div`
  transition: 5s;
  opacity: ${({ state }) => (state === "entered" ? 1 : 0)};
`

const Item = () => {
  // ...
  return <Transition in={animate} timeout={500} unmountOnExit mountOnEnter>
    {(state) => <Fade2 state={state}>Fade In</Fade2>}
  </Transition>
}