グローバルナビゲーションへ

本文へ

フッターへ

お役立ち情報Blog



React-transition-groupでモーダルアニメーションを実装する!

ReactでCSSアニメーションを扱うためのライブラリを紹介していきます。

React-transition-groupとは

アニメーションそのものを提供しているのではなく、CSSをDOMに反映するタイミングを管理してアニメーションを実現するライブラリとなっています。そして4つのコンポーネントが用意されています。

  • Transition
  • CSSTransition
  • SwitchTransition
  • TransitionGroup

作りたいアニメーションによって使い分ける必要があります。

インストール

モーダルを実装

今回はCSSTransitionとStyledComponentを用いてモーダルを実装します。

実際の挙動がこちらです。

このモーダルのアニメーションはオーバーレイとモーダル本体の2つで構成されています。オーバーレイはフェードインとフェードアウト、一方モーダル本体はフェードインとフェードアウトに加え拡大縮小が含まれています。

それではコードを見ていきましょう。

オーバーレイとモーダル本体で使用したCSSTransitionのプロパティは同じなので、モーダル本体を例に挙げ解説します。

inは表示非表示を切り替えるためのステートを渡します。
timeoutはアニメーションの開始から終了までの時間です。
最後のunmountOnExitはアニメーションが終了した時にCSSTransitionをアンマウントさせることができます。

そしてCSSTransitionにchildrenで渡しているのがモーダル本体です。オーバーレイも同様です。

classNamesに渡した文字列が、アニメーションのクラス名のプレフィックスになります。

上記のクラス名を使用したコードです。

モーダルの切り替えステートをtrueにするとmodal-enterのスタイルでマウントされ、modal-enter-activeのスタイルに切り替わります。 falseにするとmodal-exitのスタイルが適応され、modal-exit-activeに切り替わりアンマウントされるという流れになります。

まとめ

モーダル以外にも他のコンポーネントを用いて様々な動きのアニメーションを実装することができます。
自分でcssを書いて実装するため柔軟性の高いアニメーションを作ることができます。ぜひ使ってみてはいかがでしょうか。

The following two tabs change content below.

Riku-S

事業開発部 web application engineer
高校の情報技術科でc言語やネットワークに関する知識を学ぶ。一時は公務員を目指すが、エンジニアの夢を捨てきれずエンジニアとしてアーティスへ入社。現在、事業開発部としてGo言語を使用した自社サービスの開発に携わっている。 資格:情報検定、ITパスポート試験
この記事のカテゴリ

FOLLOW US

最新の情報をお届けします