使用 View Transition API 順暢轉換

你可以使用 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 以上版本。

開始建構

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

建立跨文件檢視轉換