TL;DR

use-animate-presenceをインストールしてデモの通りにすれば、すぐに実装できます。

レンダーとアニメーションのライフサイクルを同期させる

Reactのマウントとアンマウントのアニメーションでポイントとなるのは、レンダーとアニメーションのライフサイクルの同期。それは、ライブラリを使わなくても簡単にできることだけど、目的が遊び以外だったらほぼ確実にライブラリを使った方が無難だと思います。

簡単な実装からはじめる

Reactのマウントとアンマウントのアニメーションは昔からややこしいやり方を必要としていて、react-transition-groupのようなライブラリが生まれた。マウントなら、フェードインのようなアニメーションはJSを使わなくてもCSSだけで作れるが、アンマウントの場合ややこしくなります。

SvelteとかRiotにあるアンマウントの直前に実行されるライフサイクルメソッドがReactにはないのが原因です。例えば、普段は何かのbooleanでレンダーするかどうかを判断しています。それを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で編集：

Codesandboxで編集：