GODRICH
#cssアニメーション#ボタン#ローディング#トランジション#スクロール#ダッシュボード#実用ui#デザイントレンド

React アニメーション ライブラリなしで作るCSS9選

· Godrich · 9種 · 8分で読める

フィードバックSCSSCSSのみホバーダッシュボード

Reactで作った画面に動きを付けたいとき最初に思い浮かぶのはreact アニメーション ライブラリの導入ですが、コンポーネントが現れたり消えたりするタイミングさえ押さえれば一行でコピペOKなCSSだけで済むことも多いです。

マウント時@starting-styleフェード01 react-css-animation-mount-fade-starting-style アンマウントexit(allow-discrete)02 react-css-animation-unmount-exit-discrete リスト追加削除アニメーション03 react-css-animation-list-add-remove クラス切替の状態遷移04 react-css-animation-toggle-class-state keyで再トリガー05 react-css-animation-key-retrigger CSS Modules+SCSS設定06 react-css-animation-css-modules-setup startViewTransition+状態更新07 react-css-animation-view-transition-react-state Suspenseスケルトン切替08 react-css-animation-suspense-skeleton-swap ルート遷移アニメーション09 react-css-animation-route-transition

自動再生 · タイルを押すとその項目へ · すべて1つのzip

9つは人気順ではなく、Reactコンポーネントが実際にたどる順番で並べています。画面に現れて(01)→閉じると消えて(02)→その間にリストの項目が増減し(03)→状態に応じて見た目が変わり(04)→同じ登場アニメーションをもう一度再生する必要が出て(05)→それを実際にビルドする設定を挟み(06)→画面全体が別の画面に切り替わり(07)→まだ来ていないデータを待ち(08)→最後にページ自体が切り替わる(09)、という流れです。アイデア型(Reactではあまり見ない組み合わせ)は01・02・07番の3つです。コンポーネントへ渡す曲線の値を選ぶ段階ならCSSイージングカーブとスプリングがその一覧で、状態によって数字が変わる画面の例としてはCSS料金表のアニメーションが近い題材です。

01マウント時@starting-styleフェード

どこで使うか

カードコンポーネントがマウントされた瞬間、@starting-styleがDOMに存在しなかった時点の値を定義するため、useEffectで「マウント済み」フラグを別に作らなくてもopacityが0から1へトランジションします。

マウント時@starting-styleフェード
新しいタブで開く

01 · マウント時@starting-styleフェード — 計測 累積面積 19.029% · 動いたフレーム 8/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

@starting-style@keyframes mf-mountReact 19

押さえておく点

条件付きで新しく描画される通知カードや、リストに追加された直後の項目に向いています。

@starting-style {
  .mf-card { opacity: 0; transform: translateY(10px) scale(.94); }
}
.mf-card {
  opacity: 1;
  transform: none;
  transition: opacity $duration $easing, transform $duration $easing;
}

02アンマウントexit(allow-discrete)

見えるもの

閉じるボタンを押しても即座にアンマウントせず、まずclass="is-exiting"を付けてtransition-behavior: allow-discreteでdisplay切り替えを遅らせ、onTransitionEndの中で実際の状態を消します。

アンマウントexit(allow-discrete)
新しいタブで開く

02 · アンマウントexit(allow-discrete) — 計測 累積面積 22.772% · 動いたフレーム 10/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

allow-discreteonTransitionEndexit class

どう作るか

モーダル・ダイアログを閉じるときや、トースト消去アニメーションに向いています。

.ue-dialog {
  display: flex;
  opacity: 1;
  transform: scale(1);
  transition: opacity $duration $easing, transform $duration $easing, display $duration allow-discrete;
}
.ue-dialog.is-exiting {
  display: none;
  opacity: 0;
  transform: scale(.92) translateY(6px);
}

03リスト追加削除アニメーション

どんな場面か

state配列に項目を追加・削除すると、新しい<li>は01番と同じ@starting-styleで入ってきて、削除される項目は02番のexitクラスのパターンをもう一度使い、アニメーションライブラリなしでもタイミングが揃います。

リスト追加削除アニメーション
新しいタブで開く

03 · リスト追加削除アニメーション — 計測 累積面積 14.355% · 動いたフレーム 10/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

key@keyframes la-enter@keyframes la-leave

コードの読み方

TODOリストやカート内の行項目、通知スタックにそのまま使えます。

{items.map((it) => (
  <li
    key={it.id}
    className={`${styles.item} ${it.leaving ? styles.leaving : styles.entering}`}
    onTransitionEnd={() => it.leaving && finishRemove(it.id)}
  >
    {it.label}
    <button className={styles.remove} onClick={() => startRemove(it.id)}>×</button>
  </li>
))}

04クラス切替の状態遷移

何が起きるか

1つのboolean状態がそのまま1つのクラス名にマッピングされ、その間の動きはすべてCSSトランジションが担当します。

クラス切替の状態遷移
新しいタブで開く

04 · クラス切替の状態遷移 — 計測 累積面積 1.805% · 動いたフレーム 11/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

useStateclassNametransition

コードの要点

「状態がクラスを決め、動きはCSSが決める」というReactで最も一般的なパターンで、開閉パネルやアクティブ状態のナビ項目にそのまま使えます。

.tg-panel:not(.is-open) .tg-panel__chevron { transform: rotate(-90deg); }
.tg-panel:not(.is-open) .tg-panel__body { opacity: 0; transform: scaleY(0); }
.tg-panel__body {
  transform-origin: top;
  transition: opacity $duration $easing, transform $duration $easing;
}

05keyで再トリガー

画面で起きること

key propの値を変えるとReactはそのコンポーネントを丸ごとアンマウントし、新しいインスタンスとして再マウントするため、マウント時に一度だけ再生される登場アニメーションを好きなタイミングで再生できます。

keyで再トリガー
新しいタブで開く

05 · keyで再トリガー — 計測 累積面積 4.161% · 動いたフレーム 10/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

key propremount@keyframes

動く仕組み

確認エラーの揺れをもう一度見せたいときや、スコアが変わるたびにお祝いエフェクトを出し直したいときに使います。

function Badge({ value }: { value: number; key?: number }) {
  // keyが変わるたびにReactはこの要素をアンマウント・再マウントし、
  // マウント時1回限りのpopキーフレームが毎回最初から再生される。
  return <span className={styles.badge}>+{value}</span>;
}
// 呼び出し側: <Badge key={score} value={score} />

06CSS Modules+SCSS設定

見え方

この記事のreact/フォルダ9つ全部が頼っている実際のビルド設定を示す項目で、*.module.scssファイルがstyles.fooのようなローカルスコープのクラス名にコンパイルされ、グローバル衝突なしにコンポーネントごとにスタイルが閉じ込められます。

CSS Modules+SCSS設定
新しいタブで開く

06 · CSS Modules+SCSS設定 — 計測 累積面積 1.792% · 動いたフレーム 9/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

*.module.scssstyles.cardscoped classname

組み立て方

コンポーネントスコープのSCSSを使いたいReactプロジェクト全般に当てはまります。

// styles.card・styles.titleはハードコードした文字列ではなく、
// CssModulesSetup.module.scssのクラス名がビルド時に実際にコンパイルされた値。
<div className={styles.term}>
  <div className={styles.accent}>styles.card → "{styles.card}"</div>
  <div className={styles.accent}>styles.title → "{styles.title}"</div>
</div>

07startViewTransition+状態更新

react 画面遷移 アニメーション をどこで使うか

document.startViewTransition()がReact状態更新を包むと、ブラウザが変更前後のDOMスナップショットを自動的にクロスフェードするため、変更した要素ごとに手動でアニメーションをかける必要がありません。

startViewTransition+状態更新
新しいタブで開く

07 · startViewTransition+状態更新 — 計測 累積面積 30.558% · 動いたフレーム 6/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

startViewTransitionflushSync@keyframes vt-cross-in

なぜこう書くか

ただしコールバックの中でsetStateだけを呼ぶとReact 18の自動バッチングがコミットを遅らせてしまうため、flushSyncでその更新を同期的に強制しないとスナップショットのタイミングが合いません。

const toggle = () => {
  const doc = document as DocWithViewTransition;
  const next = mode === "list" ? "grid" : "list";
  if (doc.startViewTransition) {
    doc.startViewTransition(() => flushSync(() => setMode(next)));
  } else {
    setMode(next);
  }
};

08Suspenseスケルトン切替

どの画面か

React.SuspenseのfallbackスロットにCSSシマースケルトンを置いておくと、遅延読み込みされたコンポーネントの準備ができた時にfallbackが抜け、実際のコンテンツが同じ場所でフェードして入ってくるため画面がガクッとなりません。

Suspenseスケルトン切替
新しいタブで開く

08 · Suspenseスケルトン切替 — 計測 累積面積 4.592% · 動いたフレーム 15/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

React.lazySuspense fallbackshimmer

実装の核

コード分割されたルートのコンテンツや、遅延読み込みされるダッシュボードウィジェットに向いています。

.sk-bar {
  background: linear-gradient(90deg, rgba(255,255,255,.1) 25%, rgba(255,255,255,.24) 50%, rgba(255,255,255,.1) 75%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.1s linear infinite;
}
@keyframes sk-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

09ルート遷移アニメーション

何が動くか

URLパラメータをそのままコンポーネントのkeyとして使うか、ルート切り替えをstartViewTransitionで包むと、出ていくページと入ってくるページが瞬間切り替えの代わりにCSSトランジションでつながります。

ルート遷移アニメーション
新しいタブで開く

09 · ルート遷移アニメーション — 計測 累積面積 30.983% · 動いたフレーム 15/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

key by routestartViewTransitionexit/enter

何が肝心か

SPAのルート遷移や、同じレイアウトを共有するタブ風のページに向いています。

const navigate = () => {
  const next = (route + 1) % ROUTES.length;
  if (typeof document !== "undefined" && "startViewTransition" in document) {
    (document as any).startViewTransition(() => setRoute(next));
  } else {
    setRoute(next);
  }
};
// <Page key={ROUTES[route]} label={ROUTES[route]} />

どこで壊れるか — 9つを作って踏んだ落とし穴

何が問題か

react アニメーション フェード イン から順に9つを作っていて一番よく踏んだ失敗は08番(Suspenseスケルトン)でした。最初の実装ではスケルトンとコンテンツを両方position: absoluteで重ねただけで、外側のカードに高さを明示していなかったため、カードそのものが潰れた40pxほどの帯としてレンダリングされてしまいました——絶対位置の子要素は親の高さ計算に入らないという、CSSを触ったことがある人なら知っている落とし穴ですが、Reactコンポーネントの中に隠れていると気づきにくいものです。実測では累積面積が0.67%から4.96%まで回復し、heightを固定してから正常になりました。

どう避けるか

再レンダリングのたびにアニメーションが最初へ戻る問題は、背景まで流れ続けるオーロラのメッシュグラデーションLPパーツのように途切れるとすぐ分かる画面でより痛みます。

もう一つは03番(リスト追加削除)で、幅を320pxまで縮めるとテキストが2行に折り返り、リスト全体の高さがビューポートをはみ出す問題です。9つ入った圧縮ファイルを開くときのパスワードはndwa6jafで、そのまま貼り付ける前に各項目へwhite-space: nowrapとtext-overflow: ellipsisを当てて1行に固定しておくと同じ問題を避けられます。keyを扱う05・09番にもよくある落とし穴があり、keyの値を変えずに中身だけ変えると同じインスタンスが保たれたままになり、マウントアニメーションが一度も再生されません。

アクセシビリティ

reduced-motion で残るもの

9つともprefers-reduced-motion: reduceではループアニメーションを止め、最終状態(マウントなら表示、折りたたみなら閉じた状態、ルートなら到達後の画面)にそのまま固定します。01・02番のようにトランジション自体が情報のすべてではない項目はアニメーションがなくても機能がそのまま残り、05番(keyの再トリガー)のように「もう一度知らせる」役割の項目はreduced-motionでも数値自体は即座に切り替わるため情報は失われません。

そのほかに気をつけること

zipの中のvanilla・reactコードにも同じメディアクエリがそのまま入っているので、手を加えなくてもアクセシビリティの既定値がついてきます。他に配布しているCSS作例はカテゴリー一覧に、状態をクラス1つで切り替える別の例はトグルスイッチ9選にまとめてあります。

FAQ

react アニメーション サンプル を動かすのにライブラリは必須ですか？

ほとんどのマウント・アンマウント・状態遷移は、この記事の9つのようにCSSとReactのフックだけで足ります。タイムラインを細かく調整したい場合や、ドラッグジェスチャーのような物理シミュレーションが必要な場合だけ、ライブラリの方が有利です。

@starting-styleはどのブラウザで使えますか？

最新のChrome・Edge・Operaは対応していますが、SafariとFirefoxは対応状況がバージョンによって分かれます。対応していないブラウザではトランジションなしでいきなり表示されるだけでレイアウトは壊れないため、プログレッシブエンハンスメントとして使っても安全です。詳しい対応状況はMDNの@starting-styleのドキュメントで確認できます。

key propを変えるとパフォーマンスに問題はありませんか？

keyが変わるたびにコンポーネントが丸ごと新しく作り直されるため、頻繁に変わるリスト全体に毎回新しいkeyを振ると負荷が大きくなります。05番のように再生トリガーが必要な小さな要素1つだけに絞って使うのがおすすめです。keyで状態を初期化する仕組みはReact公式ドキュメントに、クラス1つで状態を切り替える別の例は保存・コピーのような状態遷移9選にもまとめてあります。ルートが切り替わる間に何を見せるかが問題なら、ページ遷移のローディングがその空白を埋めます。

解凍パスワードを入力してください

パスワードはこの記事の本文の中にあります。読み進めると出てきます。