ViewTransition

Baseline 2025 *

インスタンスプロパティ

ViewTransition.finished 読取専用: Promise で、遷移のアニメーションが完了し、新しいページビューがユーザーに表示され操作可能になると履行されます。
ViewTransition.ready 読取専用: Promise で、擬似要素ツリーが作成され、遷移のアニメーションが始まろうとすると履行されます。
ViewTransition.types 読取専用: ViewTransitionTypeSet であり、ビュー遷移に設定された型を参照・変更することができます。
ViewTransition.updateCallbackDone 読取専用: Promise で、 document.startViewTransition() のコールバックが返すプロミスが履行されたときに履行されます。

インスタンスメソッド

skipTransition(): ビュー遷移のアニメーション部分をスキップします。ただし、 DOM を更新する document.startViewTransition() コールバックの実行はスキップしません。

例

次の SPA の例では、 ViewTransition.ready プロミスを使用して、クリック時のユーザーカーソルの位置から発生する独自の円形表示ビュー遷移を発生させ、ウェブアニメーション API によってアニメーションが指定されています。

// 最後のクリックイベントを保存
let lastClick;
addEventListener("click", (event) => (lastClick = event));
function spaNavigate(data) {
 // この API に対応していないブラウザーのためのフォールバック
 if (!document.startViewTransition) {
 updateTheDOMSomehow(data);
 return;
 }
 // クリック位置を取得するか、画面の中央へフォールバックする
 const x = lastClick?.clientX ?? innerWidth / 2;
 const y = lastClick?.clientY ?? innerHeight / 2;
 // 最も遠いコーナーまでの距離を取得
 const endRadius = Math.hypot(
 Math.max(x, innerWidth - x),
 Math.max(y, innerHeight - y),
 );
 // 遷移を作成
 const transition = document.startViewTransition(() => {
 updateTheDOMSomehow(data);
 });
 // 擬似要素が作成されるのを待つ
 transition.ready.then(() => {
 // ルートの新しいビューをアニメーション
 document.documentElement.animate(
 {
 clipPath: [
 `circle(0 at ${x}px ${y}px)`,
 `circle(${endRadius}px at ${x}px ${y}px)`,
 ],
 },
 {
 duration: 500,
 easing: "ease-in",
 // アニメーションさせる擬似要素を指定
 pseudoElement: "::view-transition-new(root)",
 },
 );
 });
}

このアニメーションには以下の CSS も必要です。既定のアニメーションをオフにし、古いビューと新しいビューの状態が混ざり合わないようにします(新しい状態はビュー遷移の遷移ではなく、古い状態のすぐ上に「ワイプ」されます)。

css

::view-transition-image-pair(root) {
 isolation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
 animation: none;
 mix-blend-mode: normal;
 display: block;
}