クロスドキュメント遷移

ウェブ機能: ビュー遷移 ドキュメント間のビュー遷移 Navigation API

クロスドキュメント ビュー遷移を使用すると、マルチページ アプリケーション（MPA）の異なるページ間で、アプリのようなスムーズな遷移を作成できます。デフォルトでは、ブラウザはクロスフェードを実行しますが、サイトのデザインに合わせてカスタマイズできます。

実装の手順

1. ドキュメント間のビュー遷移を有効にする

ブラウザがナビゲーションでビュー遷移をトリガーするには、ソースページとリンク先ページの両方でビュー遷移を有効にする必要があります。

/* Respect user's preference for reduced motion */
@media (prefers-reduced-motion: no-preference) {
  /* Add to a global stylesheet shared by both pages */
  @view-transition {
    /* Enables transitions for same-origin navigations */
    navigation: auto;
  }
}

2. 遷移アニメーションをカスタマイズする（省略可）

疑似要素を使用して遷移の古い状態と新しい状態をターゲットに設定し、スライドや表示などの効果を作成できます。

/* Customizing the outgoing page animation */
::view-transition-old(root) {
  /* Move the old page out to the left */
  animation: 0.4s ease-in both slide-out;
}

/* Customizing the incoming page animation */
::view-transition-new(root) {
  /* Move the new page in from the right */
  animation: 0.4s ease-out both slide-in;
}

@keyframes slide-out {
  to { transform: translateX(-20%); opacity: 0; }
}

@keyframes slide-in {
  from { transform: translateX(100%); }
}

3. 方向性のある遷移を作成する（省略可）

移動するページに応じて、異なる遷移効果が必要になる場合があります。たとえば、ホームページから連絡先ページに移動するときに、新しいコンテンツが右側から表示されるようにしたい場合があります。ホームページに戻るときに同じ効果を適用するのは不自然です。

移動先のページが、ページへのアクセス方法に関係なく常に同じ遷移タイプになる場合は、@view-transition ルールの types で指定できます。

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
    /* Specify the types of view transitions that will always be used on this page. */
    types: previous;
  }
}

pagereveal のイベント リスナー内で、遷移タイプを条件付きで指定することもできます。

window.addEventListener("pagereveal", async (e) => {
  if (e.viewTransition && window.navigation?.activation) {
    // Use application-specific logic to compute a transition type
     const transitionType = yourTransitionTypeLogic(navigation.activation.from, navigation.activation.entry);
    e.viewTransition.types.add(transitionType);
  }
});

次に、:active-view-transition-type() 疑似セレクタを使用して、タイプごとに異なるアニメーションを適用します。

:active-view-transition-type(next) {
  &::view-transition-old(root) {
    animation-name: slide-out-next;
  }

  &::view-transition-new(root) {
    animation-name: slide-in-next;
  }
}
:active-view-transition-type(previous) {
  &::view-transition-old(root) {
    animation-name: slide-out-previous;
  }

  &::view-transition-new(root) {
    animation-name: slide-in-previous;
  }
}

代替戦略

ブラウザがビュー遷移またはクロスドキュメント ビュー遷移をサポートしていない場合は、標準のインスタント ページ ナビゲーションが実行されます。クロスドキュメント ビュー遷移はプログレッシブ エンハンスメントであり、サイトのコア機能には影響しません。

JavaScript でサポートを確認するには:

if ('onpagereveal' in window) {
  // Browser supports cross-document view transitions
}

ブラウザが Navigation API をサポートしていない場合、Navigation API を使用して遷移タイプを特定することはできません。別の方法で遷移タイプを決定するか、代替の遷移タイプを指定してください。それ以外の場合、ブラウザは標準のインスタント ページ ナビゲーションを実行します。

JavaScript でサポートを確認するには:

if (window.navigation?.activation) {
  // Browser supports the Navigation API
}