モーション

アニメーション / トランジションの有効化(motion prop)と CSS トークンによる調整

グリッドの動き(アクティブセル枠の追従、ポップオーバーの出現、ソート時の行移動、読み込み中のシマー等)は motion prop で一括制御します。既定は 'auto' で、OS / ブラウザの「視差効果を減らす」設定を尊重します。

<SpreadsheetGrid motion="auto" ... />  // 'auto'(既定) | 'on' | 'off'

値	挙動
`'auto'`	`prefers-reduced-motion: reduce` が有効なら `'off'`、それ以外は `'on'`。設定の変化にも追従します。
`'on'`	OS 設定に関わらず動かします。
`'off'`	すべて止めます(表示結果は同じで、瞬時に切り替わります)。

デモ

motionhoverHighlightanimateRowsshowCopyRangehighlightChanges

ToolbarRows: 10 / 10Columns: 5 / 5Sort: なし

Rows: 10 / 10Columns: 5 / 5

Active: なしSelection: なしCells: 0 / Rows: 0Cols: 0

確認しやすいよう、デモは motion="on"(OS の「視差効果を減らす」に関わらず動かす)で始めています。既定の 'auto' では、その設定が有効な環境だと動きません。
行の移動 / フェードイン: 「在庫数で降順ソート」/「ソート解除」(列メニュー ⋮ からのソートでも同じ)か、「rows をシャッフルして差し替え」を押します(animateRows)。
変更セルのフラッシュ: 「外部更新」を押すか、在庫数 / 単価を編集・貼り付け・Ctrl/Cmd+Z します(highlightChanges)。
コピー範囲の点線: 範囲を選んで Ctrl/Cmd+C。Esc で消えます(showCopyRange)。
ホバーのクロスヘア: hoverHighlight を cross にしてセルの上へポインタを置きます。
アクティブセル枠の追従: 矢印キーやクリックで枠が滑ります。行ドラッグの live 方式は行ドラッグ並び替え、列ドラッグの live 方式は列の並べ替え、保存状態の印は SSRM のデモで試せます。

効果の一覧

効果	既定	トークン	備考
アクティブセル枠 / 選択範囲の追従	有効	`--ssg-motion-fast`	キーボード移動 / クリックで枠が新しい位置へ滑ります。スクロール中とポインタでの範囲ドラッグ中は瞬時に追従します。
ポップオーバー / メニューの出現	有効	`--ssg-motion-fast`	列メニュー / コンテキストメニュー / フィルター / ツールパネル / select 候補 / 日付パネルが 4px 上からフェードインします(出現のみ)。
ソート / フィルター / グループ開閉の行移動	有効(`animateRows`)	`--ssg-motion-base`	描画中の行が新しい位置へ滑ります。auto-height 行と SSRM では自動で無効です。
スクロールなしで現れた行のフェードイン	有効(`animateRows`)	`--ssg-motion-base`	ソートで窓に入ってきた行、展開したグループの子行、差し替えた `rows` の行が上から順にフェードインします。
コピー範囲の動く点線	有効(`showCopyRange`)	—	`Ctrl/Cmd+C` のあと、コピー元の範囲に Excel と同じ点線が流れます。`Esc` と編集開始で消えます。
ホバーのクロスヘア	opt-in(`hoverHighlight: 'cross'`)	—	ポインタの行に加えて列ヘッダー・行番号・同じ列の他セルを薄く染めます(静的な強調)。
変更セルのフラッシュ + 数値トゥイーン	opt-in(`highlightChanges`)	`--ssg-motion-slow` / `--ssg-motion-base`	値が変わったセルが一瞬アクセント色で光り、数値は旧値から新値へカウントアップします。外部更新 / 貼り付け / undo の「どこが変わったか」が分かります。
セル単位の保存状態	有効(`showSaveStatus`、SSRM の書き戻し時)	`--ssg-motion-base` / `--ssg-motion-slow`	保存中の斜線 + スピナー → ✓ バッジ。失敗は揺れ + 赤いフラッシュ + ✕ とセル下のチップ。
行ドラッグの live 退避	opt-in(`rowDragMotion: 'live'`)	160ms 固定	掴んだ行がポインタに追従し、通る先の行がその場で退避します。
列ドラッグの live 退避	opt-in(`columnDragMotion: 'live'`)	160ms 固定	掴んだ列がポインタに追従し、通る先の列がその場で左右へ退避します。固定ペインをまたぐときは列の複製(浮かぶ列)が付いてきて、見出しにピン / 移動の矢印のアイコンが出ます。デモは列の並べ替え。
読み込み中のシマーと到着行のフェードイン	有効	`--ssg-motion-base`	SSRM の取得中はスケルトンに光の帯が流れ、到着した行のセルが上から順に 3px 下からフェードインします。スクロールで出入りする行は対象外です。
細かな遷移	有効	`--ssg-motion-fast`	ヘッダー操作アイコンのフェード、チェックボックス、タブのインジケータ、ツールチップ、スクロール位置インジケーター。

行の並び替えアニメ(`animateRows`)

<SpreadsheetGrid animateRows ... />  // 既定 true。false で行の移動 / フェードインだけを止める

ソート・フィルター・グループの開閉・rows の差し替えで、描画中の行が新しい位置へ滑ります。仮想化の窓の外へ出る行は即時に消え、窓に入ってきた行はフェードインします。
auto-height 行(autoHeight)と serverSide(dataSource)では、行高の実測やブロック到着と干渉するため自動で無効になります。
行ドラッグ並び替えのドロップ後のスライドは従来どおり(animateRows とは独立)。

変更セルのフラッシュ(`highlightChanges`)

<SpreadsheetGrid highlightChanges ... />  // 既定 false

rows が変わったとき、値が変わったセルを一瞬アクセント色で光らせ、数値の既定セルは旧値から新値へカウントアップします(表示は valueFormatter で整形)。セル編集 / 貼り付け / クリア / undo・redo / 外部からの rows 差し替えのすべてが対象です。
clientSide 専用です(SSRM の書き戻しは「セル単位の保存状態」が担当)。描画中のセルだけが対象で、変わったセルが 200 を超えるとフラッシュのみ、2,000 を超える・行の挿入 / 削除 / 並べ替えを伴う・参照の変わった行が 5,000 を超える(データの読み直し)ときは何もしません。
renderCell の列はフラッシュのみ(カウントアップは既定セルだけ)。

セル単位の保存状態(`showSaveStatus`)

serverSide(dataSource.updateRows)の書き戻しでは、確定したセルに保存状態の印が出ます(既定 true)。

保存中: セルに斜線が流れ、右上に小さなスピナー。
成功: ✓ の緑バッジが 1.3 秒出て消えます。
失敗: セルが揺れて赤く光り、✕ バッジとセルの下に「保存に失敗しました。値を戻しました」のチップが 4 秒出ます(スクロールで消えます)。既存の保存失敗バーと onServerSideWriteError はそのまま動きます。

<SpreadsheetGrid dataSource={dataSource} showSaveStatus={false} />  // 印を出さない

印は data-ssg-save="pending" | "ok" | "failed" 属性と .ssg-save-indicator 要素で付くので、色はトークン(--ssg-save-pending / --ssg-save-ok / --ssg-save-failed)で変えられます。

速さの調整(CSS トークン)

各効果は 3 つの継続時間トークンとイージングだけを参照します。利用側は .ssg-root へのトークン上書きで一括調整できます。

.ssg-root {
  --ssg-motion-fast: 100ms;   /* 既定 140ms: アクティブセル枠の追従、ポップオーバーの出現 */
  --ssg-motion-base: 200ms;   /* 既定 260ms: 行の移動、開閉 */
  --ssg-motion-slow: 450ms;   /* 既定 600ms: 変更セルのフラッシュ等の一過性の強調 */
  --ssg-motion-ease: ease-out; /* 既定 cubic-bezier(0.2, 0.8, 0.2, 1) */
}

'off'(または 'auto' + 視差効果を減らす)のときは、グリッド本体とポップオーバー / メニュー / パネル / ドラッグゴースト / ツールチップに .ssg-motion-off が付き、継続時間トークンが 0 になります。:where(特異度 0)で定義しているため、停止中でも特定の効果だけ戻すことができます。

/* 停止中でもアクティブセル枠の追従だけは動かす */
.ssg-root.ssg-motion-off {
  --ssg-motion-fast: 140ms;
}

注意

SSR(Next.js 等)では 'auto' はいったん 'on' で描画し、ハイドレーション後にクライアント側で再解決します(theme='auto' と同じ)。
prefers-reduced-motion を直接見ていた従来の効果(ツールパネルのフラッシュ、フィルター候補のスピナー、スクロール位置インジケーターのフェード)も motion の実効値で判定します。'auto' では従来と同じ挙動です。

モーション

デモ

効果の一覧

行の並び替えアニメ(animateRows)

変更セルのフラッシュ(highlightChanges)

セル単位の保存状態(showSaveStatus)

速さの調整(CSS トークン)

注意

On this page

行の並び替えアニメ(`animateRows`)

変更セルのフラッシュ(`highlightChanges`)

セル単位の保存状態(`showSaveStatus`)