TL;DR

use-animate-presence 을 설치하고 데모대로 하면 즉시 구현할 수 있습니다.

렌더링과 애니메이션의 라이프사이클 동기화

React의 마운트와 언마운트의 애니메이션으로 포인트가 되는 것은, 렌더와 애니메이션의 라이프 사이클의 동기. 그것은 라이브러리를 사용하지 않아도 쉽게 할 수 있는 것이지만, 목적이 놀이 이외라면 거의 확실히 라이브러리를 사용하는 것이 무난하다고 생각합니다.

간단한 구현으로 시작

React의 마운트와 언마운트의 애니메이션은 옛날부터 다소 어려운 방법이 필요하고 있어, react-transition-group 과 같은 라이브러리가 태어났다. 마운트라면, 페이드 인과 같은 애니메이션은 JS를 사용하지 않아도 CSS만으로 만들 수 있지만, 마운트 해제의 경우 다소 어려워집니다.

Svelte나 Riot에 있는 언마운트 직전에 실행되는 라이프사이클 메소드가 React에는 없는 것이 원인입니다. 예를 들어, 평소에는 무언가의 부울로 렌더링할지 여부를 결정합니다. 그것을 false 로 하면(자), 그 컴퍼넌트가 곧바로 React의 트리로부터 삭제되어 애니메이션을 셋업할 시간이 없습니다. 삭제를 연장하려면 트릭이 필요합니다.

가장 간단한 트릭은 boolean을 정의하고 true가 될 때 CSS 애니메이션을 시작하는 CSS 클래스를 추가하는 방법입니다. 그리고, 애니메이션을 시키고 싶은 엘리먼트에 onAnimationEnd 청취자를 부여한다. 그것이 실행되면, 이번에는 렌더할지 어떨지의 boolean 을 false 로 하면(자), 드디어 언마운트 할 수 있습니다.

export default function App() {
  const [animateBeforeUnmount, setAnimateBeforeUnmount] = React.useState(false);
  const [isRendered, setIsRendered] = React.useState(true);
  const divRef = React.useRef();

  const handleAnimationEnd = () => {
    setIsRendered(false);
    setAnimateBeforeUnmount(false);
  };

  return (
    <>
      <button onClick={() => setAnimateBeforeUnmount(true)}>Toggle</button>
      {isRendered && (
        <div
          onAnimationEnd={handleAnimationEnd}
          ref={divRef}
          className={`bg-square ${animateBeforeUnmount && "fade-out"}`}
        />
      )}
    </>
  );

Codesanbox에서 편집 :

use-animate-presence 위의 예는 간단하다고 하면 간단하지만, 현실 세계의 앱은 거기까지 간단하지 않다. 로직을 재사용해야 하거나 더 복잡한 애니메이션과 여러 애니메이션을 동기화해야 합니다. 그것도 쉽게하기 위해 use-animate-presence를 만들었습니다. 이 후크는 1KB 조금 밖에 없기 때문에, 깊이 생각하지 않고 설치할 수 있습니다. 이 후크는 메인 스레드 외부에서 원활하게 실행 스프링(Spring)의 물리를 사용한 애니메이션을 한다 마운트와 언마운트를 체인할 수 있다(렌더와 애니메이션의 라이프 사이클 동기) 그 밖에도 여러가지 있습니다. use-animate-presence를 사용하여 무엇을 할 수 있는지 다음 데모를보십시오. 애니메이션 중에 버튼을 눌러 애니메이션이 갑자기 멈추지 않고 부드럽게 취소됨을 알 수 있습니다.

Codesandbox에서 편집 :

이 데모에서는 스프링이 사용됩니다. CSS 애니메이션에서는 불가능하지만 Web Animations API를 뒷면에서 사용하기 때문에 CSS 애니메이션처럼 실행중인 Javascript에는 방해받지 않고 60FPS 애니메이션이 보장됩니다!