使用 View Transition API 順暢轉換

Bramus

View Transition API 可讓您在網站的不同檢視畫面之間，建立順暢的視覺轉換效果。無論網站是建構為多頁面應用程式 (MPA) 或單頁應用程式 (SPA)，都能為使用者提供更具視覺吸引力的瀏覽體驗。

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

  • 產品資訊頁面上的縮圖會轉換為產品詳細資料頁面上的全尺寸產品圖片。
  • 固定式導覽列，可讓您在不同網頁間瀏覽時，導覽列仍維持在原位。
  • 格線，項目會隨著篩選條件移動位置。
使用 View Transition API 建立的轉場效果。試用示範網站。必須使用 Chrome 111 以上版本。

實作檢視畫面轉換

檢視區塊轉場效果與特定應用程式架構或架構無關，不僅可以在單一文件中觸發，也能在兩個不同的文件之間觸發。

這兩種檢視區塊轉場效果都採用相同的建構模塊和原則：

  1. 瀏覽器會擷取舊狀態和新狀態的快照。
  2. 系統會更新 DOM，但會抑制算繪作業。
  3. 轉場效果是由 CSS 動畫提供支援。

這兩種型別的唯一差異在於觸發方式。

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

在單一文件中執行的檢視區塊轉換稱為「同文件檢視區塊轉換」。單頁應用程式 (SPA) 通常會發生這種情況。Chrome 111 版起支援同文件檢視畫面轉場效果。

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox Technology Preview: supported.
  • Safari: 18.

Source

如何觸發

呼叫 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 以上版本支援跨文件檢視畫面轉場效果。

Browser Support

  • Chrome: 126.
  • Edge: 126.
  • Firefox: not supported.
  • Safari: 18.2.

Source

如何觸發

如果兩個頁面都選擇加入，系統就會在相同來源的跨文件導覽中觸發跨文件檢視畫面轉場效果。換句話說，沒有可呼叫的 API 來啟動跨文件檢視區塊轉換。使用者點按連結時，點擊動作會觸發檢視區塊轉場效果。

如要加入，請使用下列 CSS 片段：

@view-transition {
  navigation: auto;
}

範例

以下堆疊導覽器範例是 MPA，在兩個不同的文件之間使用跨文件檢視畫面轉場效果。視您是否要深入導覽而定，頁面會推入堆疊或從堆疊中彈出。

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

開始建構

瞭解跨文件檢視區塊轉換的所有相關資訊。

建構跨文件檢視區塊轉場效果