方向ナビゲーションの遷移

ウェブ機能: ビュー遷移 アクティブ ビュー遷移

シングルページ アプリケーション（SPA）では、新しいページに移動せずにページのコンテンツを置き換えることで、ナビゲーションの外観を提供します。デフォルトでは、コンテンツは遷移なしで単純に置き換えられます。方向性のある遷移は、ビュー間の空間的な関係を視覚的に強化できます。

ユーザーが移動している方向から新しいコンテンツをスライドインすることで、アプリケーション構造のメンタルマップを作成します。たとえば、商品サイトでは「進む」場合は右に、「戻る」場合は左に遷移したり、スライドショーでは上下に遷移して次と前のスライドを表示したりします。

実装の手順

  1. ナビゲーションの方向を検出する: ユーザーがアプリケーション フローで「順方向」に移動しているか「逆方向」に移動しているかを判断します。方向を検出する方法は、ユースケースによって異なります。
  2. タイプを指定して遷移をトリガーする: types 配列で方向を document.startViewTransition() に渡して、遷移を分類します。
  3. CSS で方向性のあるアニメーションを定義する: :active-view-transition-type() 疑似クラスを使用して、ナビゲーション タイプに基づいて特定のアニメーションを適用します。

キーフレームの定義

各方向へのスライド アニメーションと各方向からのスライド アニメーションを定義します。パフォーマンスを最適化するには、transform プロパティまたは個々の変換プロパティ（scale、rotate、translate）を使用して位置の変更をアニメーション化します。opacity も一般的にパフォーマンスに優れていますが、レイアウトやペイントをトリガーしないことを確認せずに、他の CSS プロパティをアニメーション化することは避けてください。

/* Slide an element out to the left */
@keyframes slide-to-left {
  /* Mandatory: animate `transform` instead of inset properties for better performance. */
  to { transform: translateX(-100%); }
}

/* Slide an element in from the right */
@keyframes slide-from-right {
  from { transform: translateX(100%); }
}

/* Slide an element out to the right */
@keyframes slide-to-right {
  to { transform: translateX(100%); }
}

/* Slide an element in from the left */
@keyframes slide-from-left {
  from { transform: translateX(-100%); }
}

共有アニメーションの設定を行う

::view-transition-group(root) セレクタを使用して、すべての遷移で共有されるアニメーション設定を適用します。

::view-transition-group(root){
  animation: 0.4s ease-in-out both;
}

方向性のあるアニメーションを適用する

active-view-transition-type 疑似クラスを使用して、forward タイプまたは backward タイプがアクティブなときに、遷移ビューをターゲットにします。

/* MANDATORY: Apply forward animations when the 'forward' type is active */
html:active-view-transition-type(forward)::view-transition-old(root) {
  animation-name: slide-to-left;
}
html:active-view-transition-type(forward)::view-transition-new(root) {
  animation-name: slide-from-right;
}

/* MANDATORY: Apply backward animations when the 'backward' type is active */
html:active-view-transition-type(backward)::view-transition-old(root) {
  animation-name: slide-to-right;
}
html:active-view-transition-type(backward)::view-transition-new(root) {
  animation-name: slide-from-left;
}

移行のトリガー

移動時に、適切な型を startViewTransition メソッドに渡します。

const transitionType = yourTransitionTypeLogic();
const updateDOM = yourUpdateDOMLogic();

document.startViewTransition({
  update: updateDOM,
  types: [transitionType] // Matches the CSS :active-view-transition-type() selectors
});

ユーザー補助

アニメーションを無効にするか簡素化することで、動きを抑えるユーザー設定を常に尊重します。

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root) {
    animation: none !important;
  }
}

代替戦略

View Transitions API はプログレッシブ エンハンスメントです。サポートされていないブラウザでは、document.startViewTransition は undefined になります。このヘルパー関数に示すように、ナビゲーション ロジックを機能検出チェックでラップして、アニメーションなしで DOM の更新がすぐに実行されるようにする必要があります。

/**
 * Navigates to a new view with a directional transition.
 * @param {Function} updateDOM - Callback to update the DOM state.
 * @param {string} direction - Either 'forward' or 'backward'.
 */
function navigate(updateDOM, direction) {
  // Feature detect for browsers that do not support View Transitions
  if (!document.startViewTransition) {
    updateDOM();
    return;
  }

  // Start transition with the specific navigation type
  document.startViewTransition({
    update: updateDOM,
    types: [direction] // Matches the CSS :active-view-transition-type() selectors
  });
}