react-transition-group@^2で提供されているコンポーネントは

• Transition
• CSSTransition
• TransitionGroup

の３つです。

Transitionは以下のようなプロパティを取ります。

childrenには(status: 'entering' | 'entered' | 'exiting' | 'exited') => JSX.Elementが渡されます。このstatusの状態を使ってクラス名や何かしらの属性を内部の要素に設定し、CSSなどを使ってアニメーションさせることができます。

inは内部コンポーネントを表示するかどうかです。inがfalseの時はexitingからexitedに向かい、trueの時はenteringからenteredに向かいます。1番最初は単に-ingなしでenteredかexitedが直接設定されます。

timeoutは、statusが-ingである状態の時間(msec)を指定します。これはaddEndListenerを設定しない場合は必須になります。
addEndListenerは動的にtimeout時間を設定したい場合に使えます。例えば CSS のtransitionでアニメーションするような場合、その終わりにtransitionendイベントが発火しますが、その発火するまでの時間を使うことでtimeoutの代わりとすることができます。（修正箇所も減る）これは第一引数にchildren関数での戻り値の要素が渡り、第二引数では-ingの終わりということになるdone関数が渡ってきます。この渡ってきたルート要素からアニメーションする要素を取得し、transitionendイベントでdoneを読んで、-ingを終えるといったことができます。注意点として、このaddEndListenerはinが変わるたびに毎回実行されます。そのためイベントの登録などをしている場合、実行回数分登録することになってしまうので、毎回doneを呼ぶタイミングでイベントの解除模するといいと思います。

mountOnEnterはinがtrueになるまでマウントしなかったり、unmountOnExitはexitedになる度アンマウントする為のプロパティです。消える時はアニメーションしなくていいみたいな場合に使うといい感じです。

またonEnteredやonExitedなどを渡して完了した時に連動してある処理を行うこともできます。ほかに、

• 直前の onEnter, onExit
• -ingのonEntering, onExiting

があります。

内部的にはある程度設定済みのTransitionです。与えられたTransitionと同様のinやtimeoutやこのコンポーネント独自のclassNamesを元に主により高機能なクラス名の管理を行ってくれます。与えたclassNamesにサフィックスとして-enter, -enter-active, -enter-done, -exit, -exit-active, -exit-done, -appear, -appear-activeがルート要素に付くようになるので、それらのクラス名を使って CSS でアニメーションを設定します。

サフィックスの名前は以下のような状態だと思うといいかなと思います。

• -enterと-exitはTransitionの-ingが付く直前に付き、-doneが付く時取り除かれる
  • またはonEnterとonExitは呼ばれたタイミングからonEnteredやonExitedが呼ばれるタイミングまで
• -enter-activeと-exit-activeはTransitionの-ingの別名
• -enter-doneと-exit-doneはTransitionの-edの別名

1つ1つがTransitionを持つような配列要素をレンダリングしたい時にそれらをラップするように使うだけです。注意点は２つあります。まず、各配列のルート要素はTransitionである必要があります。2つ目はTransitionにはinではなくkeyが必須です。またこれはユニークな値である必要があります。inはTransitionGroupがkeyから有無を判定して自動で設定してくれるので考えないで済みます。

import {TransitionGroup} from 'react-transition-group';

(() => {
  <TransitionGroup>
    {items.map(item => {
      return 
        <CSSTransition key={item.id}>{
          status => {
            /* ... */
          }
        }</CSSTransition>
      );
    })
  </TranitionGroup>
})();