react-transition-group@^2で提供されているコンポーネントは
Transition
CSSTransition
TransitionGroup
の３つです。
Transition
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を呼ぶタイミングでイベントの解除模するといいと思います。
mountOnEnterintrueunmountOnExitexited
onEnteredonExited
onEnteronExit-ingonEnteringonExiting
TransitionTransitionintimeoutclassNamesclassNames-enter-enter-active-enter-done-exit-exit-active-exit-done-appear-appear-active
-enter-exitTransition-ing-doneonEnteronExitonEnteredonExited
-enter-active-exit-activeTransition-ing-enter-done-exit-doneTransition-ed
TransitionTransitionTransitioninkeyinTransitionGroupkey
import {TransitionGroup} from 'react-transition-group';
(() => {
{items.map(item => {
return
{
status => {
/* ... */
}
}
);
})
})(); 
