使用 View Transition API 順暢轉換

Bramus

View Transition API 可讓您在網站上的不同檢視畫面之間建立無縫的視覺轉場效果。無論網站是多頁應用程式 (MPA) 還是單頁應用程式 (SPA)，這項功能都能為使用者提供更吸引人的視覺體驗。

您通常會在下列情況下使用檢視畫面轉場效果：

  • 產品資訊頁面上的縮圖圖片，會在產品詳細資料頁面中轉換為全尺寸產品圖片。
  • 固定導覽列，在您從一個頁面瀏覽至另一個頁面時會保持在原位。
  • 篩選後，項目會移動至格狀區域中。
使用 View Transition API 建立的轉場效果。試用示範網站。需要 Chrome 111 以上版本。

實作檢視畫面轉場效果

檢視畫面轉場效果不受限於特定應用程式架構或架構，且不只可在單一文件中觸發，也可在兩個不同文件之間觸發。

這兩種檢視畫面轉場效果都依賴相同的建構模塊和原則：

  1. 瀏覽器會擷取舊狀態和新狀態的快照。
  2. 在渲染作業遭到抑制時，DOM 會更新。
  3. 轉場效果由 CSS 動畫提供。

這兩種事件的差異在於觸發方式。

同一文件的檢視畫面轉場效果

當檢視畫面轉場在單一文件中執行時，稱為同一個文件的檢視畫面轉場。單頁應用程式 (SPA) 通常就是這種情況。從 Chrome 111 開始，Chrome 支援相同文件檢視畫面的轉場效果。

瀏覽器支援

  • Chrome：111。
  • Edge：111。
  • Firefox：不支援。
  • Safari：18 歲。

資料來源

觸發方式

呼叫 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());
}

範例

以下資訊卡範例是 SPA，會在新增或移除新資訊卡時，使用相同文件檢視畫面轉場為資訊卡加上動畫效果。

卡片示範錄影。需要 Chrome 111 以上版本。

開始建構

請參閱專屬說明文件頁面，瞭解有關同一個文件檢視畫面的轉場效果的所有資訊。

建立同一個文件的檢視畫面轉場效果

跨文件檢視畫面轉場

如果兩個不同文件之間發生檢視畫面轉場，就稱為跨文件檢視畫面轉場。這通常是 MPA 的情況。Chrome 126 以上版本支援跨文件檢視畫面的轉場效果。

瀏覽器支援

  • Chrome：126。
  • Edge：126。
  • Firefox：不支援。
  • Safari 技術預覽：支援。

觸發方式

如果兩個頁面都選擇啟用，跨文件檢視轉場效果會由相同來源的跨文件導覽觸發。換句話說，沒有任何 API 可用來啟動跨文件檢視畫面轉場效果。使用者點選連結時，點擊會觸發檢視畫面轉場效果。

如要啟用這項功能，請使用下列 CSS 程式碼片段：

@view-transition {
  navigation: auto;
}

範例

以下的Stack Navigator 範例是使用跨文件檢視畫面轉場效果的 MPA，可在兩個不同的文件之間進行轉場。視您是否要深入瀏覽導覽內容而定，系統會將頁面推送至堆疊或彈出。

Stack Navigator 示範的錄影。需要 Chrome 126 以上版本。

開始建構

瞭解跨文件檢視畫面轉場效果的所有相關資訊。

建構跨文件檢視轉場效果