方向導覽轉換

單頁應用程式 (SPA) 會取代網頁內容，而不前往新網頁，藉此提供瀏覽外觀。根據預設，系統只會替換內容，不會有任何轉場效果。方向轉換可強化檢視畫面之間的空間關係。

從使用者移動的方向滑入新內容，即可建立應用程式結構的心智圖。舉例來說，產品網站可能會向右轉場表示「前進」，向左轉場表示「返回」，投影片則可能向上和向下轉場，顯示下一張和上一張投影片。

導入步驟

偵測導覽方向：判斷使用者在應用程式流程中是「向前」還是「向後」移動。偵測方向的方式取決於您的用途。
使用類型觸發轉換：將 types 陣列中的方向傳遞至 document.startViewTransition()，以便分類轉換。
使用 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
  });
}