Reactサンプルアプリ開発 プラニングポーカー (12) React Transition Groupによるアニメーション
今回は、場のカードをオープンしたときにCSSによるちょっとしたアニメーションを付ける。
具体的には以下のように、透明度とフォントサイズを徐々に変更して動きを付けてみる。
React Transition Groupというライブラリを利用するので、まずはインストール。
$ yarn add react-transition-group @types/react-transition-groupコンポーネントの.tsxファイルでインポート。今回はCSSTransitionを使う。
import { CSSTransition } from 'react-transition-group'さて、今回はプレイヤーのカードの部分にトランジションを適用したい。トランジション用のスタイルを適用する要素を、CSSTransition要素で囲む（7-12行目）。
内側の要素は、コンポーネントであってもHTML要素であっても構わない。
<div className={`player ${playerIsMe}`}>
<div className="player-info">
<div className={"player-icon-" + props.icon}>
</div>
<div className="player-name">{props.name}</div>
</div>
<CSSTransition
in={props.open} appear={true} timeout={600} classNames="player-card-open-trans">
<div className={`player-card ${playerCardOpen}`} onClick={props.isMe ? handleModalOpen : undefined}>
<span className="point">{point}</span>
</div>
</CSSTransition>
</div>使い方の説明。
in属性に指定したプロパティやステート変数がtrueなった場合、子要素にトランジション用のクラス名が付与される- その時、
classNamesに指定したクラス名をプレフィクスとしたクラス名が付与される - まずは
-enter、続いて-enter-activeが付与される timeoutが経過すると、-enter-doneが付与される
- その時、
あとはstyle.cssで、対応するクラス指定でスタイルを指定すればOK。
.player-card-open-trans-enter {
opacity: 0;
font-size: 2.0rem;
}
.player-card-open-trans-enter-active {
opacity: 1.0;
font-size: 8.0rem;
transition: opacity 500ms ease-in, font-size 300ms linear;
}
.player-card-open-trans-enter-done {
opacity: 1.0;
font-size: 8.0rem;
}