JSライブラリを1日1つ紹介する
1日1つJSのライブラリを調べます。
① ライブラリに関するドキュメントを最初から最後まで読む
② 実際に使ってみる or 使い方を調べる
③ ライブラリを3行で説明する
本日は、react-transition-groupのドキュメントを読んで実際に業務で使っているところを調べました。
ドキュメント
今回読んだドキュメントはこちらです。
https://reactcommunity.org/react-transition-group/
実際に使ってみる
このライブラリは、自前で用意したCSSのアニメーションの状態遷移を助けてくれるライブラリです。
実際に使ってみようと思ったのですがCSSのアニメーションを自力で作るのが難しかったのと、ドキュメントが全て英語で100%理解できなかったので、
以下のQiitaのgithubをcloneして動かしたり、コードを読んでみました。
React Transition Group でCSSアニメーション - Qiita
このライブラリには4つのコンポーネントがあります。（全部Qiitaからの引用です）
Transition コンポーネント...propsの変化や時間の経過に応じて、子コンポーネントを再レンダリングする。
→このコンポーネントを使うと、「クリックしたらこのアニメーションをだす！」「何秒たったらこのアニメーションをだす！」とか指示できます。
CSSTransition コンポーネント...上記Transitionコンポーネントの機能を内包している拡張版です。より細かくて複雑な指定が可能。
→childrenという子コンポーネントを使うことができ、アニメーションを連鎖させることができます。
TransitionGroup コンポーネント...TransitionまたはCSSTransitionのリストを管理する為のコンポーネント。
SwitchTransitionコンポーネント...Vueのあるモードを使うときに役立つコンポーネント。
ちょっと今までのライブラリと比べると扱いが難しそうですが、ReactでCSSを使った複雑なアニメーションを作るのに便利なライブラリであることがわかりました！
