ライブラリを使わない入退場アニメーション

{show && } のように条件付きでレンダリングすると、show が false になった瞬間に React は要素を DOM から削除します。ノードはすでに存在しなくなるため、終了アニメーションを実行する時間がありません。

開始アニメーションは簡単ですが、終了アニメーションが本当の課題です。

最も簡単な修正方法は、アンマウントしないことです。要素をレンダリングしたままにし、非表示のときは opacity を 0 にして pointer-events: none を設定し、表示するときは 1 に戻します。

要素が DOM に残り続ける代わりに、両方向のフェードを滑らかに実現できます。

本当にアンマウントするには、mounting、mounted、unmounting、unmounted などのフェーズを持つ小さな状態機械をモデル化します。終了アニメーションが完了するまで、ノードは削除しません。

各フェーズでどのアニメーション用クラスを適用するかは、state によって決まります。

この状態機械は、一般に useMount と呼ばれるカスタムフックにカプセル化できます。目的の表示状態を受け取り、要素を DOM に含めるべきかどうかと、現在のフェーズを返します。

タイミングのロジックが再利用可能なフックに置かれるため、コンポーネントをすっきり保てます。

一般的な規約にならい、マウント時には enter、続いて enter-active を適用し、削除時には exit、続いて exit-active を適用します。ベースクラスで開始状態を設定し、active クラスでトランジションを使った終了状態を設定します。

適切なタイミングでこの 2 つを切り替えると、アニメーションが実行されます。

終了アニメーションがいつ完了したかを知るには、要素の transitionend イベントを監視します。終了アニメーションでこのイベントが発生したら、state を unmounted に切り替えてノードを削除します。

これにより、推測したタイムアウトではなく、視覚的なアニメーションの終了に正確に合わせてアンマウントできます。

これらすべてを、in prop と children を受け取る Transition コンポーネントにまとめられます。子要素を終了アニメーションの間マウントしたままにし、フェーズごとに適切なクラスを適用します。

利用側は in を切り替えるだけで、正しい開始・終了アニメーションをそのまま利用できます。

細かな点ですが、active クラスを追加する前に、ブラウザーに開始クラスを描画させる必要があります。そうしないとトランジションなしで跳ねてしまいます。2 つの処理の間に requestAnimationFrame を挟むか、強制的にリフローを発生させると、トランジションが実際に実行されます。

これにより、ブラウザーがまず開始時の値を確実に登録します。

ライブラリの react-transition-group には、クラスのライフサイクルやアンマウントのタイミングを含め、このパターンをそのまま実装する Transition と CSSTransition コンポーネントが用意されています。

自作版はこのライブラリの中心的な考え方を反映しているため、一度自分で作ってみるとライブラリも簡単に理解できます。

単純なフェードが 1 つだけなら、マウントしたままにする方法や小さなフックで十分で、依存関係も増やさずに済みます。複数のトランジションを連携させる場合、追加と削除を伴うリストを扱う場合、または複雑な順序制御が必要な場合は、ライブラリによって時間を節約でき、エッジケースによるバグも減らせます。

アプリに実際に必要なアニメーションの複雑さに応じて選択してください。

終了アニメーションでは、アニメーションが完了するまで要素を保持する必要があります。これは、アンマウントしない方法、transitionend を使う状態機械、またはライブラリによって実現できます。

仕組みを理解していれば、必要な要件を満たす最も軽量な方法を選べます。

終了アニメーションについての理解度を確認しましょう。

終了アニメーションが難しい理由、2 つの解決策（マウントしたままにする方法とマウント状態機械）、transitionend によってアンマウントのタイミングを制御する方法、そして再利用可能な Transition コンポーネントの作り方を学びました。

また、自作実装ではなく react-transition-group を使うタイミングも確認しました。