React学習ログ【React学習ログ7】react-transition-groupでアニメーションを実装してみた2023年5月5日Reactにはアニメーションを実装する方法はいくつかあります。本記事では「react-transition-group」と言うパッケージを使ったアニメーションの実装を行います。react-transition-groupで代表的な機能は3つです。Transition:基本型CSSTransition:クラス自動付与TransitionGroup:リストのアニメーション化それぞれ解説していきます。状態を条件分けできるTransitionまずは「react-transition-group」をインストールします。react-transition-groupインストールしたものを読み込みます。Transitionコンポーネントでアニメーションさせたい要素を囲みます。App;Transitionコンポーネントは2つのプロパティを必須で持ちます。timeout={500}></Transition>さらにTransitionコンポーネントではアニメーションの状態を管理するために「state」を使用します。「state」について具体例を見てみましょう。);};この実装は「ON」を押すとinプロパティの中身がtrueになり、「OFF」を押すとfalseになります。{state}にstateの状態のテキストが表示されます。stateはentering→entered、exiting→exitedの流れで状態が変化していきます。entering:{in=true}でアニメーションが実行されたときentered:{in=true}でアニメーションが完了した時exiting:{in=false}でアニメーションが実行されたときexited:{in=false}でアニメーションが完了した時では実際に動きを確認してみましょう。最初「exited」が表示されています。これはuseStateでin={onOff}の初期値がfalseとなっているためです。ONボタンを押すとin={true}となりテキストがentering→entered、OFFボタンを押すとin={false}となりexiting→exitedにそれぞれ500ミリ秒の間隔で変化していきます。この状態の変化に合わせてCSSを付与したり削除したりしてアニメーションを実現します。次の実装でONボタンを押すと黄色ボックスがフェードイして、その後OFFボタンを押すと黄色ボックスがフェードアウトします。この部分で条件分けしています。ここは「entered」でないとうまく動きません。「entered」ではなく他の状態を入力するとどうなるでしょう?「entering」だとONボタンを押すとフェードイン後すぐに「entered」に変わり、フェードアウトします。「exiting」だとONボタンを押しても何も変化せず、OFFボタンを押すとフェードイン後すぐに「exited」に変わりフェードアウトします。「exited」だとOFFボタンでフェードインしそのまま表示され続けます。ちなみにCSSを別で管理して、クラス名を動的につけることも可能です。)}</Transition>以上がTransitionの基本的な使い方です。ここからはTransition、CSSTransition、TransitionGroupで共通する機能を紹介します。先ほどの実装例では今の状態だとopacity:0の状態になって見えていないだけで、DOM上に残っています。フェードイン前と、フェードアウト後に要素自体がDOM上から消えて欲しい状況の方が多いので次はその方法を解説します。mountOnEnterとunmountOnExit「フェードイン前と、フェードアウト後に要素自体がDOM上から消えて欲しい」と言うのはつまり、「entering前とexited後にDOMから消えて欲しい」と言うことです。そこでTransitionコンポーネントに次の2つのプロパティを設定します。mountOnEnter:entering前にはDOMに描画されないunmountOnExit:exited後にDOMから消されるでは例を見ていきます。)}</Transition>このようにONボタンを押してから右の検証モードの画面にdivが追加されたのがわかります。OFFボタンをを押しても追加されたdivは消えません。)}</Transition>unmountOnExitを追加することで、OFFボタンを押した後にがDOMから消されました。timeoutプロパティはオブジェクト形式で管理できる少し話は戻りますが、Transitionコンポーネントのtimeoutプロパティはアニメーションの時間を設定するために使用されると説明しました。timeoutプロパティですが最初の例では数値を入れていましたが、実はオブジェクトを渡すこともできます。オブジェクトで渡す場合はenteringとexitingの2つのアニメーション時間を別々に設定することが可能です。省略このように記述するとenteringで1秒、exitingで2秒をかけてアニメーションさせることができます。別コンポーネントに記述するもちろん別のコンポーネントにTransitionコンポーネントを作って読み込ませることも可能です。今までApp.jsに書いていたアニメーションをAnim.jsと言うファイルに移して、コンポーネントとして読み込むようにしましょう。実際の実装ではこのパターンの方が多くなると思います。App;show={onOff}でAnim.jsにtrue/falseの値を渡しています。続いてAnim.js。Anim;Transitionコンポーネントのin={props.show}でApp.jsからの値(true/false)を取得しています。イベントを設定するTransitionコンポーネントにイベントを設定することが可能です。イベントは6つのタイミングで設定することができます。以上がTransitionコンポーネントを用いたアニメーションの実装です。以上がTrasition、CSSTransition、TransitionGroup共通で使える機能です。自動でクラスを作るCSSTransition続いて「react-transition-group」のCSSTransitionについて解説します。結論から言うと、任意のクラス名を設定するとそのクラス名に紐付いた6つのクラスを自動で作成してくれ、アニメーションの状態に合わせてクラス名を自動で変更してくれます。実装方法を見てみましょう。App;2行目でCSSTransitionをインポートしています。アニメーションをさせたい要素をで囲みます。Transitionコンポーネントとは違い「state」を使ってのアニメーションの状態管理ではなくなりました。※説明のため今回はunmountOnExitをコメントアウトします。classNamesプロパティが重要で、ここに任意のクラス名を入れます。このクラス名に紐づくクラスが自動で生成されます。今回「example」と設定しているので生成されるクラス名はこの6つです。自動でクラスが生成させれるので、事前に生成されるクラスにそれぞれスタイルを設定します。100px;}実装結果はこちら。クラスが自動的に付与されていっていますね。-enterと-enter-active、-exitと-exit-activeは同時に付与されます。CSSTransitionでは何もしなければ自動で6つクラス名が付与されるのですが、これらのクラス名をそれぞれ自分で設定する方法もあります。classNamesにオブジェクトでこのようにすれば自由にクラス名を設定できます。左側の値は固定で、右側にクラス名をつけます。}}リスト追加/削除時に使うTransitionGroup次はリストに対してアニメーションを実装していきます。アニメーションなしでリストの追加・削除の実装を行います。App;結果はこうなります。(CSSの解説はしません)リストをアニメーションさせるには「react-transition-group」のTransitionGroupを使います。App;2行目にTransitionGroupを読み込んでいます。アニメーションさせたい連続した要素をTransitionGroupで囲みます。今回は先ほど学んだCSSTransitionも一緒に使ってアニメーションを実装します。TransitionGroupにはcomponentプロパティがあります。このプロパティに要素名を入れ込むことでDOMにはその要素として描画されます。今回の例では「component="ul"」としているのでDOM上ではとして存在することになります。あとは配列をループさせて値の数だけリストを生成するようにmap()を使って、各リストがアニメーションされるようにで囲めば完成です。注意点は「key={index}」がliではなく、CSSTransitionにつけられている点です。CSSTransitionでliを囲んでいるので、keyの設置場所が変わります。参考【React学習ログ2】Keyについて調べまくって役割を言語化してみた続きを見るCSSTransitionで生成されるCSSの記述はこちらです。ease-in;}これで完成です。以上がReactでのアニメーションの実装方法の解説です。本記事では「react-transition-group」を使って実装しましたが、他にもの方法はあるようです。実装しやすい方法を見つけて積極的に使っていきましょう。最後にこのコンテンツでは一般のエンジニアがどのように言語(今回はフレームワークになりますが)を学習し、つまずき、乗り越えていっているのかを垣間見えるようにしていこうと思います。できるだけ画像、動画などを盛り込んで視覚的に理解できるように工夫しています。これからプログラミングを学ぼうと考えている方の為になる発信をできれば思いますので、温かい目で見てもらえると嬉しいです。今回私が解説する上で使った教材は、Udemyのコースになります。興味があればぜひ使ってみてください。このコースの補足教材としてこのブログを使ってもらえると効果的だと思います。Toolkitについて実装を交えながら解説します。Hooksの一つのuseContext()について詳細に解説いたします。Hooksの一つのuseEffect()について使い方を詳細に解説いたします。Toolkitを実装しながら解説してみるフリーランスになって良かったこと・悪かったこと|お金・休み・スキルフロントエンドエンジニアYamato(やまと)7年目のフロントエンドです。サンフランシスコ留学の際にITの素晴らしさに触れエンジニアになると決心。独学で未経験からアルバイトで採用され入社。経験し2022年8月に独立しました。HTML/CSS・JS・WordPress・Shopifyを触っています。YAMATOdevlog。