Reactのアニメーション

Reactではアニメーションを実装するためのサードパーティのライブラリがいくつか用意されていますが、今回はreact-transition-group というReact公式のライブラリを利用しています。

詳しい使い方の説明は公式のドキュメントに任せますが、react-transition-group に含まれるTransition コンポーネントはentering, entered, exiting, exited という4つの状態を順に遷移します。それぞれの状態に合ったCSSを用意して動きをつけていきます。
※今回の下に落ちるアニメーションだけなので2つの状態(enteringとentered)だけを使用しています。

私はCSSを使い慣れていないので色々と手こずりましたが、CSSに慣れた人なら手軽にアニメーションが実装できそうです。

全体のコードはgithub、codesandboxで公開しています。