React Transition Groupの要点

Reactはコンポーネントの動作や状態を管理するが、表示の挙動に関する機能は含まれていない。このため、状態遷移管理コンポーネントが必要になる。よく使われているのがReact Transition Group。含まれるコンポーネントは、Transition, CSSTransition, TransitionGroupの3つ。

ReactにおけるCSSアニメーションを用いる手段として利用されているが、アニメーション専用というわけではなく、あるコンポーネントのAという状態からBという状態に変化するときの遷移を記述するコンポーネントです。

公式の解説とあまり差異はありませんが、要点をまとめてみます。

Transition

Transitionはあるコンポーネントの状態から別のコンポーネントの状態への遷移を記述できる。主にコンポーネントのマウント・アンマウントをアニメーションするために使われる。

内部でstateを受け取ります。これにはコンポーネントの遷移状態が格納されています。

• entering
• enterd
• exiting
• exited

// unmountOnExitは遷移移行が終了したときにコンポーネントのマウントを解除できる
<Transition in={trueかfalseを変数などで変化させる} timeout={時間} unmountOnExit>
	{state => {
        // inがtrueになったときtimeout時間でstateのenteringがenteredに変化する
        // inがfalseになったときtimeout時間でstateのexitingがexitedに変化する
	}}
</Transition>

大事なのは、inがtrueのときにコンポーネントのマウントが始まり、falseだとアンマウントが始まるということです。RTCの3つのコンポーネントはどれも、子コンポ―ネントの動作には干渉しません。コンポーネントの遷移に応じて何を行うか（主にアニメーション操作）は、プログラマ次第ということです。

CSSTransition

CSSTransitionもTransitionと同じでin propを持ち、その遷移状態における動作をプログラマが記述してあげる必要があります。CSSと頭についているように、CSSTransitionにはclassNamesというpropが用意されています。このpropにペアとなるクラス名を用意しておき、遷移状態に応じてそのクラスを適用させるという使い方になります。

例えばsampleというクラス名をセットすると、以下の遷移状態を定義できます。

• sample-enter
• sample-enter-active
• sample-enter-done
• sample-exit
• sample-exit-active
• sample-exit-done
• sample-appear
• sample-appear-active

後部につく英語がそのままの意味です。必要なもののみ記述すればOKです。

<CSSTransition
	in={変数など}
	timeout={時間}
	unmountOnExit
    classNames="クラス名"
>
    {//子要素}
</CSSTransition>

子要素はstate引数を持ちます。ここのstateに入るのはTransition同様、entering, enterd, exiting, exitedの4つです。CSSTransitionとは別なので注意が必要です。

TransitionGroup

慣れてくると1番使うのが、このTransitionGroupかなと思います。TransitionGroupは、TransitionやCSSTransitionを子に持ちます。内部のTransition・CSSTransitionの使い方は変わりませんが、in propが不要です。

ではどうやってコンポーネントの遷移を知らせるのかというと、状態オブジェクトの変化に応じて自動でin propが設定されます。各コンポーネントのアニメーション方法は個々のコンポーネントで定義することができます。

超簡単な例を作ったので、コードを見れば使い方がわかると思います。

TransitionGroupはデフォルトではdivタグを書き出しますが、component propにコンポーネントを指定することで、特定コンポーネントでの描画を行うことができます。プロジェクトの規模が大きくなってくるとコンポーネントを指定し、更にTransitionGroup内部に専用のアニメーション用の高階コンポーネントを配置し、そのコンポーネント内でTransitionやCSSTransitionを配置するという使い方になってくるでしょう。