Reactサンプルアプリ開発プラニングポーカー (12) React Transition Groupによるアニメーション

サンプル開発

2020.05.16

今回は、場のカードをオープンしたときに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;
}