Reactのアニメーション

2020/06/18

Reactでアニメーションを試してみましたよ。

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

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

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

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

React

Steamサマーセール2020です

ウィルキンソン 新パッケージ