使用 View Transition API 順暢轉換

Bramus

你可以使用 View Transition API，在網站上為不同檢視畫面建立流暢的視覺轉場效果。如此一來，不管使用者瀏覽的網站是多頁面應用程式 (MPA) 還是單頁應用程式 (SPA)，瀏覽網站時都能獲得更引人注目的視覺效果。

使用觀看轉場效果的典型情況包括：

  • 產品資訊頁面中的縮圖，在產品詳細資料頁面中轉換為原尺寸產品圖片。
  • 瀏覽頁面時，固定的導覽列會保持固定不動。
  • 內含項目在篩選過程中移動位置的格狀檢視畫面。
使用 View Transition API 建立的轉場效果。前往示範網站。裝置必須搭載 Chrome 111 以上版本。

實作檢視畫面轉場效果

檢視畫面轉換不會與特定應用程式架構或架構連結，而且還能在同一份文件中觸發，也能在兩份不同文件之間觸發。

這兩種檢視畫面轉場效果都需仰賴相同的構成要素和原則：

  1. 瀏覽器會拍攝新舊狀態的快照。
  2. DOM 會在算繪停止時更新。
  3. 轉場效果是由 CSS 動畫技術驅動。

這兩種方法的一個差別，就是您觸發它們的方式。

同文件檢視模式轉換

當在單一文件上執行檢視畫面轉換時，即稱為「相同文件檢視轉換」。這種情況通常是在單頁應用程式 (SPA) 中發生。Chrome 111 版支援相同的文件檢視轉換功能。

瀏覽器支援

  • 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，其使用跨文件檢視轉換，在不同文件之間轉換。視您想深入瀏覽的內容而定，網頁可能會推送至堆疊或彈出。

堆疊導覽器示範錄製過程。裝置必須搭載 Chrome 126 以上版本。

開始建構

瞭解跨文件檢視轉換的所有須知事項。

建立跨文件檢視轉換