React-transition-groupでモーダルアニメーションを実装する!
ReactでCSSアニメーションを扱うためのライブラリを紹介していきます。
React-transition-groupとは
アニメーションそのものを提供しているのではなく、CSSをDOMに反映するタイミングを管理してアニメーションを実現するライブラリとなっています。そして4つのコンポーネントが用意されています。
- Transition
- CSSTransition
- SwitchTransition
- TransitionGroup
作りたいアニメーションによって使い分ける必要があります。
参考
インストール
|
1 2 3 4 5 |
# npm npm install react-transition-group # yarn yarn add react-transition-group |
モーダルを実装
今回はCSSTransitionとStyledComponentを用いてモーダルを実装します。
実際の挙動がこちらです。
このモーダルのアニメーションはオーバーレイとモーダル本体の２つで構成されています。オーバーレイはフェードインとフェードアウト、一方モーダル本体はフェードインとフェードアウトに加え拡大縮小が含まれています。
それではコードを見ていきましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 |
import './App.css'; import {CSSTransition} from "react-transition-group"; import {useState} from "react"; import styled from "styled-components"; export const App = () => { const [isOpen, switchIsOpen] = useState(false) return ( <> <TransitionStyle> <div className="open" onClick={() => switchIsOpen(true)}>開く</div> <div className="modal-wrapper"> <CSSTransition classNames="modal" in={isOpen} timeout={700} unmountOnExit> <ModalStyle> <div className="content"> モーダルです。 </div> <div className="close" onClick={() => switchIsOpen(false)}>閉じる</div> </ModalStyle> </CSSTransition> </div> <CSSTransition classNames="overlay" in={isOpen} timeout={700} unmountOnExit> <OverlayStyle/> </CSSTransition> </TransitionStyle> </> ); } export default App // transitionのスタイル const TransitionStyle = styled.div` .open{ cursor: pointer; font-size: 40px; font-weight: bold; } .modal-wrapper{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); .modal-enter { opacity: 0; transform: scale(0.9); } .modal-enter-active { opacity: 1; transform: translateX(0); transition: opacity 0.3s, transform 0.3s; } .modal-exit { opacity: 1; } .modal-exit-active { opacity: 0; transition: opacity 0.3s, transform 0.3s; transform: scale(0.9); } } .overlay-enter { opacity: 0; } .overlay-enter-active { opacity: 1; transform: translateX(0); transition: opacity 0.3s, transform 0.3s; } .overlay-exit { opacity: 1; } .overlay-exit-active { opacity: 0; transition: opacity 0.3s, transform 0.3s; } `; // モーダルのスタイル const ModalStyle = styled.div` padding: 100px; background-color: #ffffff; display: flex; flex-direction: column; justify-content: center; align-items: center; .content{ font-size: 40px; font-weight: bold; } .close{ cursor: pointer; margin: 50px 0 0; } ` // オーバーレイのスタイル const OverlayStyle = styled.div` display: flex; align-items: center; justify-content: center; position: fixed; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); `; |
オーバーレイとモーダル本体で使用したCSSTransitionのプロパティは同じなので、モーダル本体を例に挙げ解説します。
inは表示非表示を切り替えるためのステートを渡します。
timeoutはアニメーションの開始から終了までの時間です。
最後のunmountOnExitはアニメーションが終了した時にCSSTransitionをアンマウントさせることができます。
そしてCSSTransitionにchildrenで渡しているのがモーダル本体です。オーバーレイも同様です。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<CSSTransition classNames="modal" in={isOpen} timeout={700} unmountOnExit> <ModalStyle> <div className="content"> モーダルです。 </div> <div className="close" onClick={() => switchIsOpen(false)}>閉じる</div> </ModalStyle> </CSSTransition> |
classNamesに渡した文字列が、アニメーションのクラス名のプレフィックスになります。
|
1 2 3 4 5 6 7 |
例 classNames="modal" アニメーション開始時のクラス名="modal-enter" アニメーション中のクラス名="modal-enter-active" アニメーション終了時のクラス名="modal-exit" アニメーション中のクラス名="modal-exit-active" |
上記のクラス名を使用したコードです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.modal-enter { opacity: 0; transform: scale(0.9); } .modal-enter-active { opacity: 1; transform: translateX(0); transition: opacity 0.3s, transform 0.3s; } .modal-exit { opacity: 1; } .modal-exit-active { opacity: 0; transition: opacity 0.3s, transform 0.3s; transform: scale(0.9); } |
モーダルの切り替えステートをtrueにするとmodal-enterのスタイルでマウントされ、modal-enter-activeのスタイルに切り替わります。 falseにするとmodal-exitのスタイルが適応され、modal-exit-activeに切り替わりアンマウントされるという流れになります。
まとめ
モーダル以外にも他のコンポーネントを用いて様々な動きのアニメーションを実装することができます。
自分でcssを書いて実装するため柔軟性の高いアニメーションを作ることができます。ぜひ使ってみてはいかがでしょうか。
The following two tabs change content below.
アーティス
創造性を最大限に発揮するとともに、インターネットに代表されるITを活用し、みんなの生活が便利で、豊かで、楽しいものになるようなサービスやコンテンツを考え、創り出し提供しています。
最新記事 by アーティス (全て見る)
- 暗号資産を使うための準備をしよう！「仮想通貨ウォレットMetaMaskのインストール&初期設定」 - 2022年3月2日
- Chromatic で Visual Regression Testingを導入する方法 - 2022年1月28日
- goroutineでmapにアクセスするときは排他制御をしよう - 2021年12月24日
- React18 beta の新機能を紹介する【Automatic Batching （自動バッチ処理）編】 - 2021年11月26日
- ホームページ（HP）とランディングページ（LP）の違いは？ランディングページのメリット・デメリットを解説します。 - 2021年11月2日
RECOMMENDED
関連記事
NEW POSTS
最新記事
FOLLOW US
最新の情報をお届けします
- facebookでフォロー
- Twitterでフォロー
- Feedlyでフォロー