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

Jake Archibald

Bramus

公開日: 2021 年 8 月 17 日、最終更新日: 2024 年 9 月 25 日

ビュー遷移が 1 つのドキュメントで実行される場合、それは同じドキュメント内のビュー遷移と呼ばれます。これは、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 を新しい状態に変更します。ご都合のよい方法で行っていただけます。たとえば、要素の追加や削除、クラス名の変更、スタイルの変更を行うことができます。

ページがクロスフェードします。

デフォルトのクロスフェード。最小限のデモ。ソース。

クロスフェードはそれほど印象的ではありません。幸い、切り替えはカスタマイズできますが、まず、この基本的なクロスフェードの仕組みを理解する必要があります。

注: このドキュメントのデモリンクは視覚的には見劣りしますが、コードベースは非常に小さくなっています。特定の SPA フレームワークを知らなくても、すべてのコードを読みやすく理解しやすいようにすることが目標です。

---

これらの移行の仕組み

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

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 でカスタマイズできます。

注: 古いビューと新しいビューにも mix-blend-mode: plus-lighter があり、::view-transition-image-pair には isolation: isolate があります。これは、正しいクロスフェードを作成するために必要です。理由が気になる方は、このトピックに関する記事をご覧ください。

遷移をカスタマイズする

ビュー遷移の擬似要素はすべて 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;
}

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

共有軸遷移。最小限のデモ。ソース。

注: この例では、アニメーションは常に右から左に移動します。これは、戻るボタンをクリックしたときに自然に感じられない動作です。ナビゲーションの方向に応じてアニメーションを変更する方法については、この記事の後半で説明します。

重要: 一度に実行できるビュー遷移は 1 つだけです。すでに実行中のビュー トランジション中に新しいビュー トランジションが開始されると、古いトランジションは最後までスキップされます。

---

複数の要素を遷移する

前のデモでは、ページ全体が共有軸移行に関係しています。これはページのほとんどで機能しますが、見出しの場合はスライドアウトした後にまたスライドインするため、適切ではありません。

これを回避するには、ページの残りの部分からヘッダーを抽出して、別々にアニメーション化できるようにします。これは、要素に view-transition-name を割り当てることで行います。

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

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

注: view-transition-name は一意である必要があります。2 つのレンダリングされた要素に同じ view-transition-name が同時に存在する場合、遷移はスキップされます。

その結果は次のとおりです。

固定ヘッダーを使用した共有軸遷移。最小限のデモ。ソース。

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

この 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 はデフォルトの遷移（クロスフェード）のままになっています。

重要: ブラウザが複数の遷移グループをキャプチャしても、複数のビュー遷移は作成されません。代わりに、ブラウザはすべての遷移グループを含む 1 つのビュー遷移を作成します。

デフォルトの遷移はクロスフェードだけでなく、::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)
   └─ …

デフォルトのままにします。

スライドするヘッダー テキスト。最小限のデモ。ソース。

これで、見出しテキストが少しスライドして、戻るボタンのスペースが確保されました。

注: ビュー遷移はフラットな構造を使用します。実際の DOM では、見出しテキストはヘッダーにありました。ただし、移行中は、それぞれの ::view-transition-group は兄弟です。これは、親要素からのクリッピングを気にする必要がないため、アイテムを 1 つのコンテナから別のコンテナにアニメーション化する場合に非常に便利です。

---

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

対応ブラウザ

• 125
• 125
• x
• 18.2

たとえば、カードが多数あるビューの遷移に、ページのタイトルも含まれているとします。タイトルを除くすべてのカードをアニメーション化するには、個々のカードをターゲットとするセレクタを記述する必要があります。

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);
}

重要: キャプチャを機能させるには、すべての要素に一意の view-transition-name を指定する必要があります。view-transition-class はアニメーション スタイルの重複を排除します。

次のカードの例では、上記の CSS スニペットを活用しています。新しく追加されたカードを含むすべてのカードに、1 つのセレクタ（html::view-transition-group(.card)）で同じタイミングが適用されます。

カードのデモの録画。view-transition-class を使用すると、追加または削除されたカードを除くすべてのカードに同じ animation-timing-function が適用されます。

注: Chrome チームは CSS ワーキング グループと連携して、要素に view-transition-name をより簡単に自動的に付与できる方法を検討しています。

---

遷移をデバッグする

ビュー遷移は CSS アニメーション上に構築されるため、Chrome DevTools の [アニメーション] パネルは遷移のデバッグに最適です。

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

Chrome DevTools によるビュー遷移のデバッグ。

遷移元と遷移先の要素は同じ 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();
  });
};

結果は次のようになる

1 つの要素が別の要素に遷移します。最小限のデモ。ソース。

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

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

---

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

次の例をご覧ください。

サイドバーの表示と非表示。最小限のデモ。ソース。

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

.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) 疑似要素は存在しません。サイドバーの「古い」画像がないため、画像ペアには ::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;
});

プロミスが満たされるまで遷移は開始されません。この間、ページはフリーズするため、遅延は最小限に抑える必要があります。具体的には、ネットワーク フェッチは .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)]);
});

ただし、遅延を回避し、すでにあるコンテンツを使用するほうがよい場合もあります。

---

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

サムネイルから大きな画像に遷移する場合:

サムネイルが大きな画像に切り替わる様子。デモサイトをお試しください。

デフォルトの切り替えはクロスフェードです。つまり、サムネイルがまだ読み込まれていないフル画像とクロスフェードする可能性があります。

これを処理する方法の一つは、画像全体が読み込まれるまで待ってから遷移を開始することです。理想的には、.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 の場合はどうなりますか？

アスペクト比が変更された状態で、1 つの要素が別の要素に遷移します。最小限のデモ。ソース。

デフォルトの遷移では、グループは前のサイズから後のサイズにアニメーション化されます。古いビューと新しいビューは、グループの幅が 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 に切り替わると、全画像が「切り抜きなし」になります。

注: 幅と高さをアニメーション化することは、フレームごとにレイアウトを実行するため、ウェブ パフォーマンスの分野では一般的に好まれません。ここでの ::view-transition-group で行われるように。ただし、ビュー遷移については、Chrome チームは、ほとんどの場合メインスレッドから実行できるように最適化することを計画しています。この最適化はまだ実装されていません。

詳細については、ビューの切り替え: アスペクト比の変更を処理するをご覧ください。

---

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

モバイルとパソコンで異なる遷移を使用する場合もあります。たとえば、モバイルでは横から完全にスライドしますが、パソコンではより控えめなスライドを実行する例があります。

1 つの要素が別の要素に遷移します。最小限のデモ。ソース。

これは、通常のメディアクエリを使用して実現できます。

/* 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;
  }
}

ただし、[モーションの抑制] が設定されている場合でも、ユーザーがモーションなしを希望しているわけではありません。上記のスニペットの代わりに、要素間の関係とデータフローを表現する、より控えめなアニメーションを選択することもできます。

---

ビューの遷移タイプで複数のビュー遷移スタイルを処理する

対応ブラウザ

• 125
• 125
• x
• 18

特定のビューから別のビューに遷移する際に、特別な遷移を適用する必要がある場合があります。たとえば、ページネーション シーケンスで次のページまたは前のページに移動する場合、シーケンス内の上位のページに移動するか下位のページに移動するかに応じて、コンテンツをスライドする方向を変えることができます。

ページネーションのデモの録画。移動先のページに応じて異なる遷移が使用されます。

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

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

const direction = determineBackwardsOrForwards();

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

注: 型を含む配列は、Set のようなオブジェクトに自動的に変換されます。遷移が実際に実行される前にその内容を変更するには、そのインスタンス メソッド clear()、add()、delete() を使用します。

これらのタイプに応答するには、:active-view-transition-type() セレクタを使用します。ターゲットにする type をセレクタに渡します。これにより、複数のビュー遷移のスタイルを互いに分離し、一方の宣言が他方の宣言と干渉しないようにすることができます。

タイプは遷移の取得時または実行時にのみ適用されるため、セレクタを使用して、そのタイプのビュー遷移に対してのみ、要素に 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 を使用します。これは、遷移が終了状態に達すると解決するプロミスです。このオブジェクトの他のプロパティについては、API リファレンスをご覧ください。

注: 上記のコードでは、isBackNavigation の決定方法は定義されていません。これは、ナビゲーションの実行方法によって異なります。ここでは Navigation API が非常に役立ちます。最小デモではこの 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;
}

手順は以上です。

動画の切り替えが遅くなりました。最小限のデモ。ソース。

これで、遷移中に動画が再生されるようになります。

---

Navigation API（および他のフレームワーク）との統合

ビュー遷移は、他のフレームワークやライブラリと統合できるように指定されます。たとえば、シングルページ アプリケーション（SPA）でルーターを使用している場合は、ルーターがビュー遷移を使用してコンテンツを更新するように、ルーター更新メカニズムを調整できます。

このページネーション デモから抜粋した次のコード スニペットでは、ビュー遷移がサポートされている場合に document.startViewTransition を呼び出すように Navigation API のインターセプト ハンドラが調整されています。

navigation.addEventListener("navigate", (e) => {
    // Don't intercept if not needed
    if (shouldNotIntercept(e)) return;

    // Intercept the navigation
    e.intercept({
        handler: async () => {
            // Fetch the new content
            const newContent = await fetchNewContent(e.destination.url, {
                signal: e.signal,
            });

            // The UA does not support View Transitions, or the UA
            // already provided a Visual Transition by itself (e.g. swipe back).
            // In either case, update the DOM directly
            if (!document.startViewTransition || e.hasUAVisualTransition) {
                setContent(newContent);
                return;
            }

            // Update the content using a View Transition
            const t = document.startViewTransition(() => {
                setContent(newContent);
            });
        }
    });
});

一部のブラウザでは、ユーザーがスワイプ ジェスチャーでナビゲートするときに独自の遷移が提供されます。その場合は、独自のビュー遷移をトリガーしないでください。ユーザー エクスペリエンスが低下したり、混乱を招いたりする可能性があります。ユーザーには、ブラウザが提供する遷移と、デベロッパーが提供する遷移の 2 つの遷移が連続して実行されます。

そのため、ブラウザが独自の視覚的な遷移を提供している場合は、ビューの遷移を開始しないようにすることをおすすめします。これを行うには、NavigateEvent インスタンスの hasUAVisualTransition プロパティの値を確認します。ブラウザが視覚的な遷移を提供している場合、このプロパティは true に設定されます。この hasUIVisualTransition プロパティは PopStateEvent インスタンスにも存在します。

上記のスニペットでは、ビュー遷移を実行するかどうかを判断するチェックで、このプロパティが考慮されます。同じドキュメント内のビューの遷移がサポートされていない場合や、ブラウザが独自の遷移をすでに提供している場合は、ビューの遷移はスキップされます。

if (!document.startViewTransition || e.hasUAVisualTransition) {
  setContent(newContent);
  return;
}

次の録画では、ユーザーがスワイプして前のページに戻ります。左側のキャプチャには、hasUAVisualTransition フラグのチェックが含まれていません。右側の録画にはチェックが含まれているため、ブラウザが視覚的な切り替えを提供したため、手動のビュー切り替えがスキップされています。

hasUAVisualTransition のチェックなし（左）と幅あり（右）の同じサイトの比較

注: デフォルトでは、Android 版 Chrome ではスワイプ操作で呼び出されたナビゲーションの視覚的な遷移は提供されません。

この機能は試験運用版であり、chrome://flags/#back-forward-transitions 機能フラグが有効になっている場合にのみ利用できます。

---

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)',
      }
    );
  });
}

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

---

遷移機能の強化

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

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

すべきでないこと

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 プロミスです。これは、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。

View Transition API は DOM の変更をラップして遷移を作成します。ただし、遷移アニメーションの成功や失敗ではなく、DOM の変更がいつ発生したかを知りたい場合もあります。updateCallbackDone はそのようなユースケース向けです。

viewTransition.ready

遷移の疑似要素が作成され、アニメーションが開始される直前に解決される Promise。

遷移を開始できない場合は拒否されます。これは、重複する view-transition-name などの構成ミスや、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

グループを埋めるために絶対に配置する必要がある。

isolation: isolate があり、mix-blend-mode が古いビューと新しいビューに与える影響を制限します。

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

ラッパーの左上に絶対配置されます。

グループの幅の 100% を占有しますが、高さは自動的に設定されるため、グループを埋めるのではなく、アスペクト比が維持されます。

mix-blend-mode: plus-lighter が設定されているため、クロスフェードを正確に行うことができます。

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

---

フィードバック

デベロッパーの皆様からのフィードバックをお待ちしております。ご提案やご質問がある場合は、GitHub の CSS Working Group に問題を報告してください。問題の前に [css-view-transitions] を付けます。

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