Web制作者はチェックしておこう！ View Transitions（ビュー遷移）でよく使うコードのまとめ-View Transitions Toolkit

Post on:2026年4月14日

View Transitions Toolkitの特徴

ここ数年の間に、CSSのView Transitionsを使用したさまざまなコンテンツが増えてきました。機能もさらに充実してきて、キーフレームの最適化、スクロールによるView Transitionsの制御など、進化を続けています。

View Transitionsのさまざまな実装を再利用しやすいように頻繁に使用されるコードパターンをまとめたのがView Transitions Toolkitです。Apache License 2.0で、商用プロジェクトでも無料で利用できます。

View Transitions Toolkit

View Transitions Toolkitは、View Transitionsを使用するときに役立つヘルパー関数のコレクションです。これらの関数は高度なパターンをより簡単に実装できるようにするための不足部分を補います。

機能検出

View Transitionsの機能がサポートされているかどうかの情報を取得します。
Shimのサポート

document.activeViewTransitionに対するShimサポート。
アニメーション

アニメーションの抽出、測定、最適化を行うためのユーティリティ。
遷移再生制御

View Transitionの再生を一時停止、再開、またはスクラブします。
自動ページナビゲーションタイプ

ナビゲーションの起点・終点位置に基づいて、View Transitionタイプを自動的に挿入します。
その他のユーティリティ

setTemporaryViewTransitionNamesやextractViewTransitionNameなどのヘルパー関数

プロジェクトの目的は、View Transitionsで少し高度なことをしたいときに、毎回ゼロからやり直す必要がないように、これらのユーティリティを提供することです。

View Transitions Toolkitのデモ

View Transitions Toolkitでは、基本的なものだけでなく、Webサイトやスマホアプリで見かける実用的なデモもたくさん揃っています。デモのソースコードはリポジトリに含まれています。

Feature Detection

View Transitionsがサポートされているかどうかに関する情報を取得します。

Animations: getAnimations

View Transitionsのアニメーションを取得します。ViewTransitionPartを指定することで、アニメーションをさらに絞り込むことができます。

Scroll-Driven View Transition

スクロールすると、ヘッダが大きいサイズから小さいサイズに切り替わります。これはView Transitionsを開始し、すぐに一時停止し、スクロール位置に基づいてスクラブすることで実現されています。

Navigation Types

ナビゲーションをクリック（タップ）すると、開始位置と終了位置に基づいてView Transitionsを実行し、ページが遷移します。

Playback Control

これはView Transitionsの制御をコントロールするデモです。ユーティリティを使用して、View Transitionsにリンクされているすべてのアニメーションを同時に一時停止・再生・スクラブできます。

Animations: Measure

extractGeometryを使用して、View Transitions疑似要素のジオメトリ（サイズと位置）を測定し、抽出します。beforeプロパティとafterプロパティを持つオブジェクトが生成され、それぞれに要素のジオメトリが含まれています。各ジオメトリには、width, height, top, leftのプロパティがあります。

View Transitions Toolkitの使い方

パッケージマネージャー（NPMなど）を使用してインストールします。

npm i view-transitions-toolkit

1	npm i view-transitions-toolkit

インストールが完了したら、必要なモジュールをインポートすると、その機能を使用できます。たとえば、キーフレームを最適化するには、下記のように記述します。

import { optimizeGroupAnimations, OPTIMIZATION_STRATEGY } from "view-transitions-toolkit/animations";

const t = document.startViewTransition(() => { … });
await t.ready;

// デフォルトのSCALE戦略を使用して、すべてのグループアニメーションを最適化
optimizeGroupAnimations(t, "*");

// SLIDE戦略を使用して::view-transition-group(box-flip)アニメーションのみを最適化
optimizeGroupAnimations(t, "box-flip", OPTIMIZATION_STRATEGY.SLIDE);