使用 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;
}

範例

以下堆疊導覽器範例是一個 MPA，其使用跨文件檢視轉換，在不同文件之間轉換。視您是否要深入瀏覽導覽內容而定，系統會將頁面推送至堆疊或彈出。

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

開始建構

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

建立跨文件檢視轉換