什麼是觀看轉場效果？(2024 年 Google I/O 大會更新內容)

Bramus

在 2024 年 Google I/O 大會上，我宣布了觀看轉換的下一步：多頁面應用程式 (MPA) 的跨文件檢視畫面轉換作業。

另外，我也分享了一些改善項目，讓您能夠更輕鬆地處理一般的檢視畫面轉換。

• 使用 view-transition-class 在檢視畫面轉換虛擬元素之間共用動畫樣式。
• 含使用中類型的選擇性觀看轉場效果。

這些改善項目同時適用於單頁應用程式 (SPA) 和 MPA 跨文件檢視畫面的轉場效果。

MPA 跨文件檢視轉場效果

在 Chrome 111 版中，Chrome 團隊發布了單頁應用程式的相同文件檢視轉換作業，這是網路建立社群中廣受好評的功能。

很高興能看到各位使用 View 轉換製作而成。這些評分的來源包括「讓縮圖變大是大張相片」的常見做法，或是 Airbnb 精心分享的沉浸式體驗。真厲害！

不過，初次實作需要您建構 SPA 才能使用檢視轉換功能。自 Chrome 126 起，系統已預設啟用同一來源瀏覽的檢視轉換功能。您現在可以在同源的兩份不同文件之間建立檢視轉換。

如要啟用跨文件檢視轉場功能，雙方都必須選擇啟用。方法是使用 @view-transition at-rule 屬性，並將 navigation 描述元設為 auto。

@view-transition {
  navigation: auto;
}

跨文件檢視轉換功能採用的建構模塊和原則，與相同文件的檢視畫面轉換效果相同。系統會擷取套用 view-transition-name 的元素，您可以使用 CSS 動畫自訂動畫。

如要自訂跨文件檢視轉場效果，請使用 pageswap 和 pagereveal 事件，這些事件可讓您存取檢視轉換物件。

• 有了 pageswap，就能在建立舊快照前，先在傳出頁面進行最後幾分鐘變更。
• 使用 pagereveal 時，您可以在新頁面初始化後開始顯示。

在這兩種事件中，您都可以存取 NavigationActivation 物件，根據新舊目的地記錄項目或導覽類型自訂跨文件檢視畫面的轉換作業。

更棒的是，您可以等待內容透過轉譯封鎖功能載入，然後執行預先算繪，在執行檢視轉換前縮短載入時間。

操作示範

這個堆疊導覽工具示範結合了上述所有功能 (加上部分改善項目)。

這是具有跨文件導覽功能的 MPA，由相同來源代管。使用 pagereveal 時，動畫類型會根據新舊目的地記錄項目決定。

window.addEventListener("pagereveal", async (e) => {
  if (e.viewTransition) {
    // Determine animation type based on the old/new history entries
    const transitionClass = determineTransitionClass(navigation.activation.from, navigation.currentEntry);
    document.documentElement.dataset.transition = transitionClass;

    // Cleanup after transition ran
    await e.viewTransition.finished;
    delete document.documentElement.dataset.transition;
  }
});

閱讀說明文件

如要進一步瞭解如何啟用及自訂跨文件檢視畫面的轉場效果，請參閱跨文件檢視畫面轉換說明文件。

查看轉場效果改善項目

除了提供 MPA 跨文件檢視轉換的功能外，Chrome 還進行了一些修正，以便通常自動切換檢視畫面轉場。

這些改善項目同時適用於 SPA 的相同文件檢視轉換和 MPA 跨文件檢視轉換。

與「view-transition-class」分享動畫樣式

截至目前為止，以相同方式為多個快照建立動畫時，您必須為每個含有不重複 view-transition-name 的元素重複其虛擬選取器，分別指定每個快照。

透過 view-transition-class，您現在可以在所有快照中新增共用名稱。請在虛擬選取器中使用這個共用名稱，指定所有相符的快照。這會使選取器變得簡單許多，並自動從一個元素擴充到多個元素。

#cards-wrapper > div {
  view-transition-class: card;
}
html::view-transition-group(.card) {
  animation-timing-function: var(--bounce);
}

以下資訊卡範例使用 view-transition-class，透過單一選取器，將相同的動畫時間套用至多個快照。

如要進一步瞭解 view-transition-class，請參閱 view-transition-class 的專屬說明文件。

使用中類型的選擇性觀看轉場效果

檢視轉場效果的另一個修正方式，就是在擷取並執行檢視畫面轉場時新增類型。如此一來，即可在同一個網頁上處理各種檢視畫面轉場，不必變更另一個檢視畫面的宣告。

舉例來說，前往分頁順序前往下一頁或返回上一頁時，建議您根據前往的頁面是較高頁面或順序較低的頁面，使用不同的動畫效果。

在啟用的類型之前，您可以先在 DOM 中新增類別，並在 CSS 中回應這些類別。不過，您也必須在轉換作業完成後進行清除。

使用檢視畫面轉換類型可以達到相同的效果，而且系統會在檢視畫面轉換作業完成後，自動清除這些類型的轉換。類型只會在擷取或執行轉場效果時套用。

針對相同文件檢視轉換，請將 types 傳遞至 startViewTransition 方法，現在可接受物件。update 是更新 DOM 的回呼函式，types 則是字串序列。

const direction = determineBackwardsOrForwards();

const t = document.startViewTransition({
  update: updateTheDOMSomehow,
  types: ['slide', direction],
}););

如果是跨文件檢視轉換，請使用 types 描述元在 @view-transition 規則中設定類型，或是在 pageswap 和 pagereveal 事件中即時設定類型。

@view-transition {
  navigation: auto;
  types: slide, forwards;
}

設定類型組合後，您可以使用適用於檢視畫面轉換根層級的 :active-view-transition-type() 和 :active-view-transition 虛擬類別選取器，在 CSS 中回應這些類型。

/* Animation styles for forwards type only */
html:active-view-transition-type(forwards) {
  &::view-transition-old(content) {
    animation-name: slide-out-to-left;
  }
  &::view-transition-new(content) {
    animation-name: slide-in-from-right;
  }
}

如要進一步瞭解檢視轉換類型，請參閱相同文件檢視轉換和跨文件檢視轉換專用說明文件。

意見回饋：

我們隨時歡迎開發人員提供寶貴意見。請在 GitHub 上向 CSS Working Group 回報問題並提供建議和問題。在問題前方加上 [css-view-transitions]。

如果您遇到錯誤，請改為回報 Chromium 錯誤。