シングルページ アプリケーションでの同一ドキュメント ビュー遷移

Jake Archibald

Bramus

単一ドキュメントで実行されるビュー遷移を、同一ドキュメントのビュー遷移と呼びます。これは通常、JavaScript を使用して DOM を更新するシングルページ アプリケーション（SPA）で発生します。Chrome 111 以降、Chrome では同じドキュメント ビューの移行がサポートされています。

同じドキュメント ビューの移行をトリガーするには、document.startViewTransition を呼び出します。

function handleClick(e) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow();
    return;
  }

  // With a View Transition:
  document.startViewTransition(() => updateTheDOMSomehow());
}

ブラウザを呼び出すと、view-transition-name CSS プロパティが宣言されているすべての要素のスナップショットが自動的にキャプチャされます。

次に、渡されたコールバックを実行して DOM を更新します。その後、新しい状態のスナップショットを取得します。

これらのスナップショットは疑似要素のツリーに配置され、CSS アニメーションの機能を使用してアニメーション化されます。元の状態と新しい状態のスナップショットのペアは、コンテンツがクロスフェードしている間、以前の位置とサイズから新しい場所にスムーズに移行します。必要に応じて、CSS を使用してアニメーションをカスタマイズできます。

デフォルトの遷移: クロスフェード

デフォルトのビュー遷移はクロスフェードであるため、この API のわかりやすい導入となります。

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // With a transition:
  document.startViewTransition(() => updateTheDOMSomehow(data));
}

ここで、updateTheDOMSomehow は DOM を新しい状態に変更します。これは自由に変更できます。たとえば、要素の追加と削除、クラス名の変更、スタイルの変更を行うことができます。

このように、ページがクロスフェードします。

クロスフェードはそれほど印象的ではありません。トランジションはカスタマイズできますが、その前にこの基本的なクロスフェードの仕組みを理解しておく必要があります。

移行の仕組み

前のコードサンプルを更新しましょう。

document.startViewTransition(() => updateTheDOMSomehow(data));

.startViewTransition() が呼び出されると、API はページの現在の状態を取得します。これにはスナップショットの取得も含まれます。

完了すると、.startViewTransition() に渡されるコールバックが呼び出されます。ここで DOM が変わります。その後、API はページの新しい状態を取得します。

新しい状態が取り込まれると、API は次のような擬似要素ツリーを構築します。

::view-transition
└─ ::view-transition-group(root)
   └─ ::view-transition-image-pair(root)
      ├─ ::view-transition-old(root)
      └─ ::view-transition-new(root)

::view-transition は、ページ上のすべての要素の上にオーバーレイとして配置されます。これは、遷移の背景色を設定する場合に便利です。

::view-transition-old(root) は古いビューのスクリーンショットで、::view-transition-new(root) は新しいビューのライブ表現です。どちらも CSS の「置換コンテンツ」（<img> など）としてレンダリングされます。

古いビューは opacity: 1 から opacity: 0 にアニメーション化され、新しいビューは opacity: 0 から opacity: 1 にアニメーション化され、クロスフェードが作成されます。

すべてのアニメーションは CSS アニメーションを使用して実行されるため、CSS でカスタマイズできます。

遷移をカスタマイズする

すべてのビュー遷移疑似要素は CSS でターゲットに設定できます。また、アニメーションは CSS を使用して定義されるため、既存の CSS アニメーション プロパティを使用して変更できます。次に例を示します。

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 5s;
}

この 1 つの変更により、フェードはかなり遅くなりました。

まだあまり良いとは言えません。代わりに、次のコードはマテリアル デザインの共有軸の移行を実装します。

@keyframes fade-in {
  from { opacity: 0; }
}

@keyframes fade-out {
  to { opacity: 0; }
}

@keyframes slide-from-right {
  from { transform: translateX(30px); }
}

@keyframes slide-to-left {
  to { transform: translateX(-30px); }
}

::view-transition-old(root) {
  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}

::view-transition-new(root) {
  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

次の結果が表示されます。

複数の要素の遷移

前のデモでは、ページ全体が共有軸の移行に関与しています。この方法はほとんどのページで機能しますが、再びスライドインするためスライドアウトするため、見出しには合わないように見えます。

これを回避するには、ページの残りの部分からヘッダーを抽出して、個別にアニメーション化します。そのためには、要素に view-transition-name を割り当てます。

.main-header {
  view-transition-name: main-header;
}

view-transition-name の値には任意の値を使用できます（ただし、遷移名がない none は除きます）。遷移全体で要素を一意に識別するために使用されます。

その結果、

これで、ヘッダーは固定され、クロスフェードされます。

この CSS 宣言によって疑似要素ツリーが変更されています。

::view-transition
├─ ::view-transition-group(root)
│  └─ ::view-transition-image-pair(root)
│     ├─ ::view-transition-old(root)
│     └─ ::view-transition-new(root)
└─ ::view-transition-group(main-header)
   └─ ::view-transition-image-pair(main-header)
      ├─ ::view-transition-old(main-header)
      └─ ::view-transition-new(main-header)

現在、2 つの移行グループがあります。1 つはヘッダー用で、もう 1 つは残りに使用します。これらは CSS で個別にターゲットにすることができ、さまざまな遷移が可能です。ただし、この例では main-header にはデフォルトの遷移（クロスフェード）のままです。

デフォルトの遷移は単なるクロスフェードではなく、::view-transition-group でも遷移します。

• 位置と変換（transform を使用）
• 幅
• 高さ

ヘッダーのサイズと位置は DOM 変更の両側で同じであるため、これまではそれが問題ではありませんでした。ヘッダーのテキストを抽出することもできます。

.main-header-text {
  view-transition-name: main-header-text;
  width: fit-content;
}

fit-content を使用すると、要素が残りの幅に引き伸ばされるのではなく、テキストのサイズになります。そうしないと、戻る矢印によってヘッダーのテキスト要素のサイズが縮小され、両方のページで同じサイズになるのではなく、縮小されます。

ここでは、次の 3 つの要素について説明します。

::view-transition
├─ ::view-transition-group(root)
│  └─ …
├─ ::view-transition-group(main-header)
│  └─ …
└─ ::view-transition-group(main-header-text)
   └─ …

繰り返しになりますが、デフォルトのままにしておきます。

これで、見出しテキストが少し満足のいくスライドになり、[戻る] ボタンのスペースを確保できるようになりました。

view-transition-class を使用して同じ方法で複数の擬似要素をアニメーション化する

複数のカードを使用するビュー遷移があり、ページ上にタイトルもあるとします。タイトルを除くすべてのカードをアニメーション化するには、すべてのカードをターゲットとするセレクタを作成する必要があります。

h1 {
    view-transition-name: title;
}
::view-transition-group(title) {
    animation-timing-function: ease-in-out;
}

#card1 { view-transition-name: card1; }
#card2 { view-transition-name: card2; }
#card3 { view-transition-name: card3; }
#card4 { view-transition-name: card4; }
…
#card20 { view-transition-name: card20; }

::view-transition-group(card1),
::view-transition-group(card2),
::view-transition-group(card3),
::view-transition-group(card4),
…
::view-transition-group(card20) {
    animation-timing-function: var(--bounce);
}

要素は 20 個ありますか？記述する必要があるセレクタは 20 個あります。新しい要素を追加する場合次に、アニメーション スタイルを適用するセレクタも拡大する必要があります。あまりスケーラブルでない。

ビュー遷移疑似要素で view-transition-class を使用して、同じスタイルルールを適用できます。

#card1 { view-transition-name: card1; }
#card2 { view-transition-name: card2; }
#card3 { view-transition-name: card3; }
#card4 { view-transition-name: card4; }
#card5 { view-transition-name: card5; }
…
#card20 { view-transition-name: card20; }

#cards-wrapper > div {
  view-transition-class: card;
}
html::view-transition-group(.card) {
  animation-timing-function: var(--bounce);
}

次のカードの例では、前述の CSS スニペットを利用しています。新しく追加したカードも含め、すべてのカードに同じタイミング（html::view-transition-group(.card)）が適用されます。

遷移をデバッグする

ビュー遷移は CSS アニメーションの上に作成されるため、遷移のデバッグには Chrome DevTools の [Animations] パネルが適しています。

[Animations] パネルで、次のアニメーションを一時停止してから、アニメーション内を前後にスクラブできます。この間、遷移の疑似要素は [要素] パネルに表示されます。

遷移する要素は同じ DOM 要素である必要はありません

これまでは、view-transition-name を使用して、ヘッダーとヘッダーのテキストに別々の遷移要素を作成しました。これらは概念的には DOM 変更の前後で同じ要素ですが、そうでない場合は遷移を作成できます。

たとえば、メインの動画の埋め込みには view-transition-name を指定できます。

.full-embed {
  view-transition-name: full-embed;
}

次に、サムネイルがクリックされたときに、遷移の期間中だけ同じ view-transition-name を渡すことができます。

thumbnail.onclick = async () => {
  thumbnail.style.viewTransitionName = 'full-embed';

  document.startViewTransition(() => {
    thumbnail.style.viewTransitionName = '';
    updateTheDOMSomehow();
  });
};

結果は次のようになります。

サムネイルがメイン画像に切り替わります。概念的に（そして文字どおり）異なる要素ですが、遷移 API は同じ view-transition-name を共有するため、同じものとして扱います。

この遷移の実際のコードは、サムネイル ページへの遷移も処理するため、前の例よりも少し複雑です。完全な実装については、ソースをご覧ください。

カスタムの開始と終了の遷移

次の例をご覧ください。

サイドバーは移行の一部です。

.sidebar {
  view-transition-name: sidebar;
}

ただし、前の例のヘッダーとは異なり、サイドバーはすべてのページに表示されるわけではありません。両方の状態にサイドバーがある場合、遷移擬似要素は次のようになります。

::view-transition
├─ …other transition groups…
└─ ::view-transition-group(sidebar)
   └─ ::view-transition-image-pair(sidebar)
      ├─ ::view-transition-old(sidebar)
      └─ ::view-transition-new(sidebar)

ただし、サイドバーが新しいページのみにある場合、::view-transition-old(sidebar) 疑似要素はありません。サイドバーに「古い」画像がないため、image-pair には ::view-transition-new(sidebar) のみが含まれます。同様に、サイドバーが古いページのみにある場合、画像ペアには ::view-transition-old(sidebar) のみが含まれます。

前のデモでは、サイドバーが開始、終了、表示のいずれの状態であるかによって、サイドバーの遷移が異なります。右からスライドしてフェードインすると入り、右にスライドしてフェードインすると外れ、両方の状態にある場合は同じ位置に留まります。

特定の開始遷移と終了遷移を作成するには、:only-child 擬似クラスを使用して、イメージのペア内の唯一の子である古い擬似要素または新しい擬似要素をターゲットにします。

/* Entry transition */
::view-transition-new(sidebar):only-child {
  animation: 300ms cubic-bezier(0, 0, 0.2, 1) both fade-in,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

/* Exit transition */
::view-transition-old(sidebar):only-child {
  animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
}

このケースでは、デフォルトが完全であるため、サイドバーが両方の状態にあるときの特定の遷移はありません。

非同期の DOM 更新、コンテンツの待機

.startViewTransition() に渡されるコールバックは Promise を返すことができます。これにより、非同期の DOM 更新が可能になります。また、重要なコンテンツの準備が整うまで待機します。

document.startViewTransition(async () => {
  await something;
  await updateTheDOMSomehow();
  await somethingElse;
});

Promise が解決されるまで遷移は開始されません。その間、ページはフリーズされているため、遅延は最小限に抑えてください。具体的には、ネットワークの取得は、.startViewTransition() コールバックの一部として行うのではなく、ページがまだ完全にインタラクティブな状態で、.startViewTransition() を呼び出す前に行う必要があります。

画像やフォントの準備が整うまで待つ場合は、積極的なタイムアウトを設定してください。

const wait = ms => new Promise(r => setTimeout(r, ms));

document.startViewTransition(async () => {
  updateTheDOMSomehow();

  // Pause for up to 100ms for fonts to be ready:
  await Promise.race([document.fonts.ready, wait(100)]);
});

ただし、場合によっては、遅延を完全に回避し、既存のコンテンツを使用することをおすすめします。

既存のコンテンツを最大限に活用

サムネイルが大きな画像に切り替わる場合:

デフォルトの遷移はクロスフェードです。つまり、まだ読み込まれていない画像全体に対してサムネイルがクロスフェードできます。

これに対処する 1 つの方法は、画像全体が読み込まれるまで待ってから遷移を開始することです。この処理は .startViewTransition() を呼び出す前に行うのが理想的です。これにより、ページがインタラクティブになり、読み込み中であることをユーザーに示すスピナーが表示されます。しかし、この場合は、より適切な方法があります。

::view-transition-old(full-embed),
::view-transition-new(full-embed) {
  /* Prevent the default animation,
  so both views remain opacity:1 throughout the transition */
  animation: none;
  /* Use normal blending,
  so the new view sits on top and obscures the old view */
  mix-blend-mode: normal;
}

これでサムネイルがフェードアウトせず、画像全体の下に表示されるようになりました。つまり、新しいビューが読み込まれていない場合は、遷移の途中にサムネイルが表示されます。つまり、遷移はすぐに開始され、画像全体を読み込むのに時間がかからなくなります。

新しいビューで透明度が設定されていればうまくいきませんが、今回はないことがわかっているため、最適化を行うことができます。

アスペクト比の変更を処理する

便利なことに、これまでのすべての遷移はアスペクト比が同じ要素に対して行われていましたが、常に同じであるとは限りません。サムネイルが 1:1 で、メイン画像が 16:9 の場合はどうなるでしょうか。

デフォルトの移行では、グループは変更前のサイズから変更後のサイズにアニメーション化されます。新旧のビューは、グループの幅が 100% で、高さが自動的に設定されます。つまり、グループのサイズに関係なく、アスペクト比が維持されます。

これは適切なデフォルト設定ですが、今回のケースでの使用は適切ではありません。それによって次のようになります。

::view-transition-old(full-embed),
::view-transition-new(full-embed) {
  /* Prevent the default animation,
  so both views remain opacity:1 throughout the transition */
  animation: none;
  /* Use normal blending,
  so the new view sits on top and obscures the old view */
  mix-blend-mode: normal;
  /* Make the height the same as the group,
  meaning the view size might not match its aspect-ratio. */
  height: 100%;
  /* Clip any overflow of the view */
  overflow: clip;
}

/* The old view is the thumbnail */
::view-transition-old(full-embed) {
  /* Maintain the aspect ratio of the view,
  by shrinking it to fit within the bounds of the element */
  object-fit: contain;
}

/* The new view is the full image */
::view-transition-new(full-embed) {
  /* Maintain the aspect ratio of the view,
  by growing it to cover the bounds of the element */
  object-fit: cover;
}

つまり、幅が拡大してもサムネイルは要素の中央に留まりますが、1:1 から 16:9 に切り替わるときに画像全体の「切り抜きを解除」されます。

詳しくは、（ビュー遷移: アスペクト比の変更の処理）（https://jakearchibald.com/2024/view-transitions-handling-aspect-ratio-changes/）をご覧ください。

メディアクエリを使用してデバイス状態の遷移を変更する

モバイルとパソコンで異なる切り替え効果を使用できます。たとえば、次の例では、モバイルでは横からスライド全体をカバーしていますが、パソコンではより細かいスライドを使用しています。

それには、通常のメディアクエリを使用します。

/* Transitions for mobile */
::view-transition-old(root) {
  animation: 300ms ease-out both full-slide-to-left;
}

::view-transition-new(root) {
  animation: 300ms ease-out both full-slide-from-right;
}

@media (min-width: 500px) {
  /* Overrides for larger displays.
  This is the shared axis transition from earlier in the article. */
  ::view-transition-old(root) {
    animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
      300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
  }

  ::view-transition-new(root) {
    animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
      300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
  }
}

一致するメディアクエリに応じて、view-transition-name を割り当てる要素を変更することもできます。

「モーションの軽減」の設定に対応する

ユーザーは、オペレーティング システムでのモーションの軽減を希望し、その設定が CSS で公開されていることを示すことができます。

次のユーザーの移行を行わないように選択できます。

@media (prefers-reduced-motion) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

ただし、「動きの低減」が望ましいからといって、ユーザーが動きをしないわけではありません。上のスニペットの代わりに、より繊細なアニメーションを選択することもできますが、それでも要素間の関係とデータの流れを表現するものを選びます。

ビュー遷移タイプを使用して複数のビュー遷移スタイルを処理する

あるビューから別のビューへの遷移には、特別にカスタマイズされた遷移が必要です。たとえば、ページネーションの順番で次のページや前のページに移動するときに、その順番で上位のページと低いページのどちらに移動するかによって、異なる方向にコンテンツをスライドさせることができます。

そのためには、ビュー遷移タイプを使用します。これにより、1 つ以上のタイプをアクティブ ビュー遷移に割り当てることができます。たとえば、ページ分けのシーケンスで上位のページに移動する場合は forwards タイプを使用し、下位のページに移動する場合は backwards タイプを使用します。これらのタイプは、遷移のキャプチャまたは実行時のみアクティブになります。各タイプは CSS でカスタマイズして、さまざまなアニメーションを使用できます。

同じドキュメント ビューの遷移で型を使用するには、types を startViewTransition メソッドに渡します。これを可能にするために、document.startViewTransition はオブジェクトも受け入れます。update は DOM を更新するコールバック関数、types は型を含む配列です。

const direction = determineBackwardsOrForwards();

const t = document.startViewTransition({
  update: updateTheDOMSomehow,
  types: ['slide', direction],
});

これらのタイプに応答するには、:active-view-transition-type() セレクタを使用します。ターゲットにする type をセレクタに渡します。これにより、複数のビュー遷移のスタイルを互いに分離した状態に保つことができ、1 つのビュー遷移の宣言がもう 1 つのビュー遷移の宣言に影響を及ぼさないようにできます。

型は遷移のキャプチャまたは実行時にのみ適用されるため、セレクタを使用して、その型のビュー遷移についてのみ、要素の view-transition-name を設定または設定解除できます。

/* Determine what gets captured when the type is forwards or backwards */
html:active-view-transition-type(forwards, backwards) {
  :root {
    view-transition-name: none;
  }
  article {
    view-transition-name: content;
  }
  .pagination {
    view-transition-name: pagination;
  }
}

/* Animation styles for forwards type only */
html:active-view-transition-type(forwards) {
  &::view-transition-old(content) {
    animation-name: slide-out-to-left;
  }
  &::view-transition-new(content) {
    animation-name: slide-in-from-right;
  }
}

/* Animation styles for backwards type only */
html:active-view-transition-type(backwards) {
  &::view-transition-old(content) {
    animation-name: slide-out-to-right;
  }
  &::view-transition-new(content) {
    animation-name: slide-in-from-left;
  }
}

/* Animation styles for reload type only (using the default root snapshot) */
html:active-view-transition-type(reload) {
  &::view-transition-old(root) {
    animation-name: fade-out, scale-down;
  }
  &::view-transition-new(root) {
    animation-delay: 0.25s;
    animation-name: fade-in, scale-up;
  }
}

次のページ設定のデモでは、移動先のページ番号に応じて、ページ コンテンツが前後にスライドします。タイプは、クリック時に決定され、document.startViewTransition に渡されます。

タイプに関係なく、アクティブ ビュー遷移をターゲットにするには、代わりに :active-view-transition 疑似クラス セレクタを使用します。

html:active-view-transition {
    …
}

ビュー遷移ルートでクラス名を使用して複数のビュー遷移スタイルを処理する

ある特定の種類のビューから別のタイプのビューへの遷移には、特別にカスタマイズされた遷移が必要です。「戻る」ナビゲーションと「進む」ナビゲーションは別のものにする必要があります。

遷移タイプ以前は、このような状況に対処する方法は、遷移ルートに一時的にクラス名を設定することでした。document.startViewTransition を呼び出す場合、この遷移ルートは <html> 要素であり、JavaScript で document.documentElement を使用してアクセスできます。

if (isBackNavigation) {
  document.documentElement.classList.add('back-transition');
}

const transition = document.startViewTransition(() =>
  updateTheDOMSomehow(data)
);

try {
  await transition.finished;
} finally {
  document.documentElement.classList.remove('back-transition');
}

遷移の終了後にクラスを削除するために、この例では transition.finished を使用しています。これは、遷移が終了状態に達すると解決される Promise です。このオブジェクトの他のプロパティについては、API リファレンスをご覧ください。

そのクラス名を CSS で使用して、遷移を変更できるようになりました。

/* 'Forward' transitions */
::view-transition-old(root) {
  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}

::view-transition-new(root) {
  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in, 300ms
      cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

/* Overrides for 'back' transitions */
.back-transition::view-transition-old(root) {
  animation-name: fade-out, slide-to-right;
}

.back-transition::view-transition-new(root) {
  animation-name: fade-in, slide-from-left;
}

メディアクエリと同様に、これらのクラスの存在を使用して、view-transition-name を取得する要素を変更することもできます。

他のアニメーションを固定せずに遷移を実行する

動画のトランジション位置のデモをご覧ください。

何か問題はありましたか？まだ行っていなくても大丈夫です。ここでは、少し遅くなります。

移行中に動画がフリーズしているように見え、再生中の動画がフェードインします。これは、::view-transition-old(video) が古いビューのスクリーンショットであるのに対し、::view-transition-new(video) は新しいビューのライブ画像であるためです。

この問題は修正できますが、まずは修正する価値があるかどうかを考えてみてください。トランジションが通常の速度で再生されているときに「問題」が見つからなかった場合は、変更する必要はありません。

どうしても修正したい場合は、::view-transition-old(video) を表示せずに、直接 ::view-transition-new(video) に切り替えます。そのためには、デフォルトのスタイルとアニメーションをオーバーライドします。

::view-transition-old(video) {
  /* Don't show the frozen old view */
  display: none;
}

::view-transition-new(video) {
  /* Don't fade the new view in */
  animation: none;
}

これで完了です。

これで、移行中に動画が再生されます。

JavaScript によるアニメーション

これまで、すべての遷移は CSS を使用して定義されていましたが、CSS では不十分な場合もあります。

この移行のいくつかは、CSS だけでは実現できません。

• アニメーションはクリックした位置から開始します。
• アニメーションは、最も遠い隅を中心とした半径の円で終了します。ただし、将来は CSS で可能になることを期待しています。

幸いなことに、Web Animation API を使用して遷移を作成できます。

let lastClick;
addEventListener('click', event => (lastClick = event));

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // Get the click position, or fallback to the middle of the screen
  const x = lastClick?.clientX ?? innerWidth / 2;
  const y = lastClick?.clientY ?? innerHeight / 2;
  // Get the distance to the furthest corner
  const endRadius = Math.hypot(
    Math.max(x, innerWidth - x),
    Math.max(y, innerHeight - y)
  );

  // With a transition:
  const transition = document.startViewTransition(() => {
    updateTheDOMSomehow(data);
  });

  // Wait for the pseudo-elements to be created:
  transition.ready.then(() => {
    // Animate the root's new view
    document.documentElement.animate(
      {
        clipPath: [
          `circle(0 at ${x}px ${y}px)`,
          `circle(${endRadius}px at ${x}px ${y}px)`,
        ],
      },
      {
        duration: 500,
        easing: 'ease-in',
        // Specify which pseudo-element to animate
        pseudoElement: '::view-transition-new(root)',
      }
    );
  });
}

この例では、遷移擬似要素が正常に作成されると解決される Promise である transition.ready を使用します。このオブジェクトの他のプロパティについては、API リファレンスをご覧ください。

拡張機能としての遷移

View Transition API は、DOM の変更を「ラップ」して遷移を作成するように設計されています。ただし、遷移は機能強化として扱う必要があります。DOM の変更は成功したものの、遷移が失敗した場合は、アプリが「エラー」状態にならないようにしてください。移行が失敗するのは理想的ですが、失敗してもユーザー エクスペリエンスの残りの部分が損なわれてはなりません。

遷移を機能強化として扱うには、遷移が失敗した場合にアプリがスローするような遷移 Promise を使用しないように注意してください。

async function switchView(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    await updateTheDOM(data);
    return;
  }

  const transition = document.startViewTransition(async () => {
    await updateTheDOM(data);
  });

  await transition.ready;

  document.documentElement.animate(
    {
      clipPath: [`inset(50%)`, `inset(0)`],
    },
    {
      duration: 500,
      easing: 'ease-in',
      pseudoElement: '::view-transition-new(root)',
    }
  );
}

この例の問題は、遷移が ready 状態に到達できない場合に switchView() が拒否されることですが、これはビューの切り替えに失敗したことを意味するものではありません。DOM は正常に更新された可能性がありますが、view-transition-name が重複していたため、遷移はスキップされました。

その場合は次の方法を試してください。

async function switchView(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    await updateTheDOM(data);
    return;
  }

  const transition = document.startViewTransition(async () => {
    await updateTheDOM(data);
  });

  animateFromMiddle(transition);

  await transition.updateCallbackDone;
}

async function animateFromMiddle(transition) {
  try {
    await transition.ready;

    document.documentElement.animate(
      {
        clipPath: [`inset(50%)`, `inset(0)`],
      },
      {
        duration: 500,
        easing: 'ease-in',
        pseudoElement: '::view-transition-new(root)',
      }
    );
  } catch (err) {
    // You might want to log this error, but it shouldn't break the app
  }
}

この例では、transition.updateCallbackDone を使用して DOM の更新を待ち、失敗した場合は拒否しています。switchView は、遷移が失敗した場合に拒否することはなくなり、DOM の更新が完了すると解決され、失敗した場合は拒否されるようになりました。

アニメーション遷移が完了したか、最後までスキップしたときのように、新しいビューが「確定」したときに switchView を解決する場合は、transition.updateCallbackDone を transition.finished に置き換えます。

ポリフィルではないけど...

これは簡単にポリフィルできる機能ではありません。ただし、このヘルパー関数を使用すると、ビュー遷移をサポートしていないブラウザでも作業が容易になります。

function transitionHelper({
  skipTransition = false,
  types = [],
  update,
}) {

  const unsupported = (error) => {
    const updateCallbackDone = Promise.resolve(update()).then(() => {});

    return {
      ready: Promise.reject(Error(error)),
      updateCallbackDone,
      finished: updateCallbackDone,
      skipTransition: () => {},
      types,
    };
  }

  if (skipTransition || !document.startViewTransition) {
    return unsupported('View Transitions are not supported in this browser');
  }

  try {
    const transition = document.startViewTransition({
      update,
      types,
    });

    return transition;
  } catch (e) {
    return unsupported('View Transitions with types are not supported in this browser');
  }
}

これは次のように使用できます。

function spaNavigate(data) {
  const types = isBackNavigation ? ['back-transition'] : [];

  const transition = transitionHelper({
    update() {
      updateTheDOMSomehow(data);
    },
    types,
  });

  // …
}

ビュー遷移をサポートしていないブラウザでも、updateDOM は呼び出されますが、アニメーション遷移は行われません。

また、遷移中に <html> に追加する classNames を指定して、簡単にナビゲーションの種類に応じて遷移を変更することもできます。

ビュー遷移をサポートしているブラウザでも、アニメーションを望まない場合は、true を skipTransition に渡すこともできます。これは、サイトで移行を無効にするユーザー設定がある場合に便利です。

フレームワークの操作

DOM の変更を抽象化するライブラリやフレームワークを使用している場合、厄介なのは DOM の変更が完了したかどうかを知ることです。さまざまなフレームワークで上記のヘルパーを使用した例を次に示します。

• React - ここでのキーは flushSync であり、一連の状態変化を同期的に適用します。はい、その API の使用については大きな警告がありますが、Dan Abramov は、今回のケースに適していると認めてくれました。React と非同期コードの場合と同様に、startViewTransition から返されるさまざまな Promise を使用する場合は、コードが正しい状態で実行されていることを確認してください。
• Vue.js - ここでのキーは nextTick で、DOM が更新されると実行されます。
• Svelte - Vue によく似ていますが、次の変更を待機するメソッドは tick です。
• Lit - ここで重要なのはコンポーネント内の this.updateComplete Promise です。これは DOM が更新されると実行されます。
• Angular - ここでのキーは applicationRef.tick で、保留中の DOM 変更がフラッシュされます。Angular バージョン 17 では、@angular/router に付属の withViewTransitions を使用できます。

API リファレンス

const viewTransition = document.startViewTransition(update)

新しい ViewTransition を開始します。

update は、ドキュメントの現在の状態がキャプチャされると呼び出される関数です。

その後、updateCallback から返された Promise が解決されると、次のフレームで遷移が開始されます。updateCallback から返された Promise が拒否された場合、遷移は破棄されます。

const viewTransition = document.startViewTransition({ update, types })

指定されたタイプで新しい ViewTransition を開始する

update は、ドキュメントの現在の状態がキャプチャされると呼び出されます。

types は、遷移をキャプチャまたは実行するときに、遷移のアクティブなタイプを設定します。最初は空です。詳しくは、後述の viewTransition.types をご覧ください。

ViewTransition のインスタンス メンバー:

viewTransition.updateCallbackDone

updateCallback から返された Promise が履行された場合に履行され、拒否された Promise が拒否される Promise。

View Transition API は、DOM の変更をラップして遷移を作成します。しかし、遷移アニメーションが成功したか失敗したかは気にせず、DOM の変化がいつ起きるかを知りたいという場合もあります。updateCallbackDone はそのユースケース向けです。

viewTransition.ready

遷移の擬似要素が作成されてアニメーションが開始されるときに実行される Promise 。

移行を開始できない場合は拒否されます。これは、view-transition-name の重複などの構成ミスや、拒否された Promise を updateCallback が返すことが原因の可能性があります。

これは、JavaScript で遷移擬似要素をアニメーション化する場合に便利です。

viewTransition.finished

最終状態が完全に表示され、ユーザーに操作が行われた時点で履行される Promise。

updateCallback が拒否された Promise を返す場合にのみ拒否されます。これは、終了状態が作成されなかったことを示しているためです。

それ以外の場合、遷移の開始に失敗した場合や、遷移中にスキップされた場合でも、終了状態に達するため、finished が処理されます。

viewTransition.types

アクティブ ビュー遷移のタイプを保持する Set に似たオブジェクト。エントリを操作するには、そのインスタンス メソッドの clear()、add()、delete() を使用します。

CSS で特定のタイプに応答するには、遷移ルートで :active-view-transition-type(type) 疑似クラス セレクタを使用します。

型は、ビューの遷移が完了すると自動的にクリーンアップされます。

viewTransition.skipTransition()

遷移のアニメーション部分をスキップします。

DOM の変更は遷移とは別であるため、これによって updateCallback の呼び出しがスキップされることはありません。

デフォルトのスタイルと遷移のリファレンス

::view-transition

ビューポート全体に表示される各 ::view-transition-group を含むルート疑似要素。

::view-transition-group

絶対的な位置付け。

「前」と「後」の状態間の width と height の遷移。

ビューポート空間の「前」と「後」のクワッド間の遷移 transform。

::view-transition-image-pair

グループ全体に配置される。

古いビューと新しいビューに対する mix-blend-mode の効果を制限する isolation: isolate があります。

::view-transition-new、::view-transition-old

ラッパーの左上に配置される。

グループの幅の 100% になりますが、高さは自動的に設定されるため、グループ全体に表示されるのではなく、アスペクト比が維持されます。

真のクロスフェードを可能にする mix-blend-mode: plus-lighter があります。

古いビューは opacity: 1 から opacity: 0 に移行します。新しいビューは opacity: 0 から opacity: 1 に移行します。

フィードバック

デベロッパーの皆様からのフィードバックをお待ちしております。そのためには、GitHub の CSS ワーキング グループに問題を報告して、提案や質問を含めてください。問題の先頭に [css-view-transitions] を付けます。

バグが発生した場合は、Chromium のバグを報告してください。