このページは Cloud Translation API によって翻訳されました。

マルチページアプリケーションのドキュメント間のビュー遷移

Bramus

2 つの異なるドキュメント間でビュー遷移が発生することを、ドキュメント間のビュー遷移といいます。これは通常、マルチページアプリケーション（MPA）に該当します。Chrome 126 以降の Chrome では、ドキュメント間のビュー遷移がサポートされています。

対応ブラウザ

ソース

ドキュメント間のビュー遷移は、同一ドキュメントビュー遷移と同じ構成要素と原則に基づいており、これは非常に意図的なものです。

ブラウザは、元のページと新しいページの両方で一意の view-transition-name を持つ要素のスナップショットを取得します。
レンダリングが抑制されている間に DOM が更新される。
最後に、遷移は CSS アニメーションを利用しています。

同一ドキュメントビューの遷移と比較した場合、ドキュメント間のビュー遷移では、ビュー遷移を開始するために document.startViewTransition を呼び出す必要がない点が異なります。代わりに、ドキュメント間のビュー遷移のトリガーは、あるページから別のページへの同一オリジンナビゲーションです。このアクションは通常、ウェブサイトのユーザーがリンクをクリックすることで実行されます。

つまり、2 つのドキュメント間のビュー遷移を開始するために呼び出す API はありません。ただし、次の 2 つの条件を満たす必要があります。

両方のドキュメントが同じオリジンに存在する必要があります。
ビューの移行を許可するには、両方のページでオプトインする必要があります。

これらの条件については、このドキュメントの後半で説明します。

ドキュメント間のビュー遷移が同一オリジンナビゲーションに限定される

ドキュメント間のビュー遷移は、同一オリジンナビゲーションのみに制限されます。参加している両方のページのオリジンが同じ場合、ナビゲーションは同一オリジンと見なされます。

ページのオリジンは、使用されているスキーム、ホスト名、ポートの組み合わせです。詳しくは、web.dev をご覧ください。

スキーム、ホスト名、ポートがハイライト表示された URL の例。これらが組み合わされて起点が形成されます。 — スキーム、ホスト名、ポートがハイライト表示された URL の例。組み合わせて送信元を形成します。

たとえば、developer.chrome.com から developer.chrome.com/blog に移動する場合は、同じオリジンであるため、ドキュメント間のビュー遷移を設定できます。developer.chrome.com から www.chrome.com に移動する場合、その遷移はクロスオリジンであり、同一サイトであるため、使用できません。

ドキュメント間のビュー移行はオプトイン方式

2 つのドキュメント間でドキュメント間のビュー移行を行うには、参加している両方のページで許可を有効にする必要があります。これは CSS の @view-transition アットルールで行います。

@view-transition at-rule で navigation 記述子を auto に設定して、ドキュメント間の同一オリジンナビゲーションのビュー遷移を有効にします。

@view-transition {
  navigation: auto;
}

navigation 記述子を auto に設定すると、次の NavigationType でビュー遷移が発生するようになります。

traverse
push または replace（有効化がユーザーによってブラウザの UI メカニズムから開始された場合）。

auto から除外される操作には、たとえば、URL アドレスバーを使用した移動やブックマークのクリック、ユーザーまたはスクリプトによる再読み込みなどが挙げられます。

ナビゲーションに時間がかかりすぎる場合（Chrome の場合は 4 秒を超える）、ビュー遷移は TimeoutError DOMException でスキップされます。

ドキュメント間のビュー遷移のデモ

ビュー遷移を使用して Stack Navigator のデモを作成する次のデモをご覧ください。ここには document.startViewTransition() の呼び出しがなく、ビュー遷移はページ間の移動によってトリガーされます。

Stack Navigator のデモの録画。Chrome 126 以降が必要です。

ドキュメント間のビュー遷移をカスタマイズする

ドキュメント間のビュー遷移をカスタマイズする場合、使用できるウェブプラットフォーム機能がいくつかあります。

pageswap イベントと pagereveal イベント
ナビゲーションの有効化に関する情報
レンダリングブロック

これらの機能は View Transition API の仕様そのものではなく、一緒に使用するように設計されています。

`pageswap` イベントと `pagereveal` イベント

対応ブラウザ

ソース

ドキュメント間のビュー遷移をカスタマイズできるように、HTML 仕様には pageswap と pagereveal という 2 つの新しいイベントが含まれています。

この 2 つのイベントは、ビュー遷移が発生するかどうかにかかわらず、同一オリジンのドキュメント間ナビゲーションごとに発生します。2 つのページ間でビュー遷移が発生する場合は、これらのイベントの viewTransition プロパティを使用して ViewTransition オブジェクトにアクセスできます。

pageswap イベントは、ページの最後のフレームがレンダリングされる前に呼び出されます。これを使用して、古いスナップショットを取得する直前に、送信ページで土壇場で変更を加えることができます。
pagereveal イベントは、ページが初期化または再有効化された後、最初のレンダリングが行われる前に発生します。これを使用すると、新しいスナップショットが取得される前に新しいページをカスタマイズできます。

たとえば、これらのイベントを使用して一部の view-transition-name 値をすばやく設定または変更したり、sessionStorage のデータを読み書きしてドキュメント間でデータを渡したりして、実際に実行する前にビュー遷移をカスタマイズできます。

let lastClickX, lastClickY;
document.addEventListener('click', (event) => {
  if (event.target.tagName.toLowerCase() === 'a') return;
  lastClickX = event.clientX;
  lastClickY = event.clientY;
});

// Write position to storage on old page
window.addEventListener('pageswap', (event) => {
  if (event.viewTransition && lastClick) {
    sessionStorage.setItem('lastClickX', lastClickX);
    sessionStorage.setItem('lastClickY', lastClickY);
  }
});

// Read position from storage on new page
window.addEventListener('pagereveal', (event) => {
  if (event.viewTransition) {
    lastClickX = sessionStorage.getItem('lastClickX');
    lastClickY = sessionStorage.getItem('lastClickY');
  }
});

必要に応じて、両方のイベントで遷移をスキップすることもできます。

window.addEventListener("pagereveal", async (e) => {
  if (e.viewTransition) {
    if (goodReasonToSkipTheViewTransition()) {
      e.viewTransition.skipTransition();
    }
  }
}

pageswap と pagereveal の ViewTransition オブジェクトは、2 つの異なるオブジェクトです。また、さまざまな Promise の処理方法も異なります。

pageswap: ドキュメントが非表示になると、古い ViewTransition オブジェクトはスキップされます。その場合、viewTransition.ready は拒否し、viewTransition.finished は解決します。
pagereveal: この時点で updateCallBack Promise は解決済みです。viewTransition.ready と viewTransition.finished の Promise を使用できます。

対応ブラウザ

ソース

pageswap イベントと pagereveal イベントのどちらでも、元のページと新しいページの URL に基づいてアクションを実行できます。

たとえば、MPA Stack Navigator では、使用するアニメーションの種類はナビゲーションパスによって異なります。

概要ページから詳細ページに移動するときは、新しいコンテンツを右から左にスライドインする必要があります。
詳細ページから概要ページに移動する際、古いコンテンツを左から右にスライドアウトする必要があります。

そのためには、pageswap の場合はこれから発生するナビゲーションに関する情報、pagereveal の場合は直前に発生したナビゲーションに関する情報が必要です。

そのため、ブラウザで同一オリジンナビゲーションに関する情報を保持する NavigationActivation オブジェクトを公開できるようになりました。このオブジェクトは、Navigation API の navigation.entries() で見つかったナビゲーションタイプ、現在および最終的なデスティネーション履歴エントリを公開します。

有効にしたページでは、navigation.activation を使用してこのオブジェクトにアクセスできます。pageswap イベントでは、e.activation を通じてこれにアクセスできます。

こちらのプロファイルのデモをご覧ください。こちらでは、pageswap イベントと pagereveal イベントの NavigationActivation 情報を使用して、ビュー遷移に参加する必要がある要素に view-transition-name 値を設定しています。

これにより、リスト内のすべてのアイテムを事前に view-transition-name で装飾する必要がなくなります。この処理は JavaScript を使用してジャストインタイムで行われ、必要な要素でのみ行われます。

プロファイルのデモの録画Chrome 126 以降が必要です。

コードは次のとおりです。

// OLD PAGE LOGIC
window.addEventListener('pageswap', async (e) => {
  if (e.viewTransition) {
    const targetUrl = new URL(e.activation.entry.url);

    // Navigating to a profile page
    if (isProfilePage(targetUrl)) {
      const profile = extractProfileNameFromUrl(targetUrl);

      // Set view-transition-name values on the clicked row
      document.querySelector(`#${profile} span`).style.viewTransitionName = 'name';
      document.querySelector(`#${profile} img`).style.viewTransitionName = 'avatar';

      // Remove view-transition-names after snapshots have been taken
      // (this to deal with BFCache)
      await e.viewTransition.finished;
      document.querySelector(`#${profile} span`).style.viewTransitionName = 'none';
      document.querySelector(`#${profile} img`).style.viewTransitionName = 'none';
    }
  }
});

// NEW PAGE LOGIC
window.addEventListener('pagereveal', async (e) => {
  if (e.viewTransition) {
    const fromURL = new URL(navigation.activation.from.url);
    const currentURL = new URL(navigation.activation.entry.url);

    // Navigating from a profile page back to the homepage
    if (isProfilePage(fromURL) && isHomePage(currentURL)) {
      const profile = extractProfileNameFromUrl(currentURL);

      // Set view-transition-name values on the elements in the list
      document.querySelector(`#${profile} span`).style.viewTransitionName = 'name';
      document.querySelector(`#${profile} img`).style.viewTransitionName = 'avatar';

      // Remove names after snapshots have been taken
      // so that we're ready for the next navigation
      await e.viewTransition.ready;
      document.querySelector(`#${profile} span`).style.viewTransitionName = 'none';
      document.querySelector(`#${profile} img`).style.viewTransitionName = 'none';
    }
  }
});

また、このコードはビュー遷移の実行後に view-transition-name 値を削除することで、自身をクリーンアップします。これにより、ページで連続的なナビゲーションの準備が整い、履歴の移動も処理できるようになります。

そのためには、view-transition-name を一時的に設定するこのユーティリティ関数を使用します。

const setTemporaryViewTransitionNames = async (entries, vtPromise) => {
  for (const [$el, name] of entries) {
    $el.style.viewTransitionName = name;
  }

  await vtPromise;

  for (const [$el, name] of entries) {
    $el.style.viewTransitionName = '';
  }
}

上のコードは、次のように簡略化できます。

// OLD PAGE LOGIC
window.addEventListener('pageswap', async (e) => {
  if (e.viewTransition) {
    const targetUrl = new URL(e.activation.entry.url);

    // Navigating to a profile page
    if (isProfilePage(targetUrl)) {
      const profile = extractProfileNameFromUrl(targetUrl);

      // Set view-transition-name values on the clicked row
      // Clean up after the page got replaced
      setTemporaryViewTransitionNames([
        [document.querySelector(`#${profile} span`), 'name'],
        [document.querySelector(`#${profile} img`), 'avatar'],
      ], e.viewTransition.finished);
    }
  }
});

// NEW PAGE LOGIC
window.addEventListener('pagereveal', async (e) => {
  if (e.viewTransition) {
    const fromURL = new URL(navigation.activation.from.url);
    const currentURL = new URL(navigation.activation.entry.url);

    // Navigating from a profile page back to the homepage
    if (isProfilePage(fromURL) && isHomePage(currentURL)) {
      const profile = extractProfileNameFromUrl(currentURL);

      // Set view-transition-name values on the elements in the list
      // Clean up after the snapshots have been taken
      setTemporaryViewTransitionNames([
        [document.querySelector(`#${profile} span`), 'name'],
        [document.querySelector(`#${profile} img`), 'avatar'],
      ], e.viewTransition.ready);
    }
  }
});

レンダリングブロックを使用してコンテンツが読み込まれるのを待つ

対応ブラウザ

ソース

ある要素が新しい DOM に存在するまで、ページの最初のレンダリングを保留したい場合があります。これによりフラッシュを回避し、アニメーション化先の状態が安定します。

<head> で、次のメタタグを使用して、ページが最初にレンダリングされる前に存在する必要がある要素 ID を 1 つ以上定義します。

<link rel="expect" blocking="render" href="#section1">

このメタタグは、その要素が DOM 内に存在するべきで、コンテンツを読み込むべきではないという意味です。たとえば画像の場合、指定された id を持つ <img> タグが DOM ツリーに存在するだけで、条件が true と評価されます。画像自体がまだ読み込み中である可能性があります。

レンダリングのブロックに取り組む前に、増分レンダリングがウェブの基本要素であることに留意してください。レンダリングのブロックを選択する場合は注意してください。レンダリングのブロックによる影響はケースバイケースで評価する必要があります。デフォルトでは、blocking=render は、Core Web Vitals への影響を測定してユーザーに与える影響を積極的に測定、測定できる場合を除き、使用しないでください。

ドキュメント間のビュー遷移で遷移タイプを表示する

ドキュメント間のビュー遷移は、ビュー遷移タイプもサポートしており、アニメーションとキャプチャする要素をカスタマイズできます。

たとえば、ページネーションの次のページに移動または前のページに移動するときに、シーケンスの上位のページと低いページのどちらに移動するかに応じて、異なるアニメーションを使用できます。

これらのタイプを事前に設定するには、@view-transition at ルールにタイプを追加します。

@view-transition {
  navigation: auto;
  types: slide, forwards;
}

その場で型を設定するには、pageswap イベントと pagereveal イベントを使用して e.viewTransition.types の値を操作します。

window.addEventListener("pagereveal", async (e) => {
  if (e.viewTransition) {
    const transitionType = determineTransitionType(navigation.activation.from, navigation.activation.entry);
    e.viewTransition.types.add(transitionType);
  }
});

これらのタイプは、古いページの ViewTransition オブジェクトから新しいページの ViewTransition オブジェクトには自動的に引き継がれません。アニメーションを想定どおりに動作させるには、少なくとも新しいページで使用するタイプを決定する必要があります。

これらのタイプに応答するには、同じドキュメントビュー遷移と同じ方法で :active-view-transition-type() 疑似クラスセレクタを使用します。

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

型はアクティブビュー遷移にのみ適用されるため、ビュー遷移が終了すると型は自動的にクリーンアップされます。そのため、型は BFCache などの機能とうまく連携しています。

デモ

次のページ設定のデモでは、移動先のページ番号に応じて、ページコンテンツが前後にスライドします。

ページネーションデモ（MPA）の録画。表示するページに応じて異なる遷移を使用します。

使用する遷移タイプは、pagereveal イベントと pageswap イベントで開始 URL と発信元 URL を確認することで決定されます。

const determineTransitionType = (fromNavigationEntry, toNavigationEntry) => {
  const currentURL = new URL(fromNavigationEntry.url);
  const destinationURL = new URL(toNavigationEntry.url);

  const currentPathname = currentURL.pathname;
  const destinationPathname = destinationURL.pathname;

  if (currentPathname === destinationPathname) {
    return "reload";
  } else {
    const currentPageIndex = extractPageIndexFromPath(currentPathname);
    const destinationPageIndex = extractPageIndexFromPath(destinationPathname);

    if (currentPageIndex > destinationPageIndex) {
      return 'backwards';
    }
    if (currentPageIndex < destinationPageIndex) {
      return 'forwards';
    }

    return 'unknown';
  }
};

フィードバック

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

マルチページ アプリケーションのドキュメント間のビュー遷移

ドキュメント間のビュー遷移が同一オリジン ナビゲーションに限定される

ドキュメント間のビュー移行はオプトイン方式

ドキュメント間のビュー遷移のデモ

ドキュメント間のビュー遷移をカスタマイズする

pageswap イベントと pagereveal イベント

ナビの有効化情報

レンダリング ブロックを使用してコンテンツが読み込まれるのを待つ

ドキュメント間のビュー遷移で遷移タイプを表示する

デモ

フィードバック

マルチページアプリケーションのドキュメント間のビュー遷移

ドキュメント間のビュー遷移が同一オリジンナビゲーションに限定される

`pageswap` イベントと `pagereveal` イベント

レンダリングブロックを使用してコンテンツが読み込まれるのを待つ