使用 View Transition API 順暢轉換

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

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

• 產品資訊頁面中的縮圖，在產品詳細資料頁面中轉換為原尺寸產品圖片。
• 瀏覽頁面時，固定的導覽列會保持固定不動。
• 內含項目在篩選過程中移動位置的格狀檢視畫面。

---

實作檢視畫面轉場效果

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

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

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

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

---

同文件檢視模式轉換

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

觸發方式

呼叫 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 會使用相同文件檢視轉場效果，在卡片新增或移除時為卡片建立動畫。

開始建構

請參閱專屬說明文件頁面，瞭解相同文件檢視轉換的所有須知事項。

建立相同文件檢視轉場效果

---

跨文件檢視轉換

如果兩個不同文件之間的檢視模式轉換，稱為「跨文件檢視轉換」。對 MPA 來說，這是很常見的情況。Chrome 126 以上版本支援跨文件檢視轉換功能。

觸發方式

如果兩個頁面均選擇接收，就會由同一來源的跨文件導覽觸發跨文件檢視轉換。換句話說，沒有可呼叫的 API 來啟動跨文件檢視的轉換。使用者按下連結時，該次點擊會觸發瀏覽轉換。

選用率最高，請使用以下 CSS 程式碼片段：

@view-transition {
  navigation: auto;
}

範例

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

開始建構

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

建立跨文件檢視轉換