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