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

Bramus

發布日期：2024 年 5 月 16 日

在 2024 年 Google I/O 大會上，我宣布了檢視畫面轉場效果的下一步：適用於多頁面應用程式 (MPA) 的跨文件檢視畫面轉場效果。

此外，我也分享了一些改良項目，讓您更輕鬆地處理一般檢視區塊轉場效果。

  • 使用 view-transition-class 在檢視區塊轉換虛擬元素之間共用動畫樣式。
  • 使用有效型別選擇性轉換檢視畫面。

這些改善措施適用於單頁應用程式 (SPA) 的同文件檢視畫面轉場，以及 MPA 的跨文件檢視畫面轉場。

MPA 的跨文件檢視畫面轉場效果

Browser Support

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

Source

在 Chrome 111 中，Chrome 團隊為單頁應用程式推出了同文件檢視畫面轉場效果，這項功能在網頁建構社群中廣受好評。

很高興看到許多人運用檢視區塊轉場效果打造的內容。從「讓縮圖放大成大相片」的典型實作方式，到高度自訂的沉浸式體驗 (例如 Airbnb 的體驗)，應有盡有。真厲害！

Airbnb 上的同文件檢視畫面轉場效果。

不過，您必須先建構 SPA，才能使用檢視區塊轉場效果。Chrome 126 版已不再如此，現在系統預設會為同源導覽啟用檢視區塊轉場效果。您現在可以在兩個同源的不同文件之間建立檢視區塊轉場效果。

如要啟用跨文件檢視畫面轉場效果，兩端都必須選擇加入。如要這麼做，請使用 @view-transition at 規則，並將 navigation 描述元設為 auto。

@view-transition {
  navigation: auto;
}

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

如要自訂跨文件檢視區塊轉場效果，請使用 pageswap 和 pagereveal 事件，存取檢視區塊轉場物件。

  • 使用 pageswap，您可以在系統擷取舊版快照前，對外送頁面進行最後的變更。
  • 使用 pagereveal，您可以在初始化後開始算繪新頁面之前，自訂新頁面。

在這兩個事件中，您都可以存取 NavigationActivation 物件，根據新舊目的地記錄項目或導覽類型，自訂跨文件檢視區塊轉場效果。

此外，您也可以等待內容載入並封鎖轉譯，以及依賴預先轉譯，在檢視區塊轉場效果執行前縮短載入時間。

示範

這個 Stack Navigator 示範結合了所有這些功能 (以及一些改良項目)。

Stack Navigator 示範的錄影畫面。系統會根據導覽啟動資訊，使用在 pagereveal 事件中自訂的跨文件檢視畫面轉場效果。也會使用預先算繪。

這是 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 分享動畫樣式

Browser Support

  • Chrome: 125.
  • Edge: 125.
  • Firefox: 144.
  • Safari: 18.2.

Source

到目前為止，如要以相同方式為多個快照製作動畫，您必須針對每個快照個別設定目標，為每個具有專屬 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 時，系統會將相同的 animation-timing-function 套用至所有卡片，新增或移除的卡片除外。

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

使用有效型別進行選擇性檢視畫面轉場

Browser Support

  • Chrome: 125.
  • Edge: 125.
  • Firefox: 144.
  • Safari: 18.

Source

檢視區塊轉場效果的另一項改良功能，是在擷取及執行檢視區塊轉場效果時新增型別。這樣一來，您就能在同一個網頁上使用各種檢視區塊轉場效果，不必宣告會變更其他檢視區塊的檢視區塊。

舉例來說，在分頁序列中前往下一頁或上一頁時，您可能會想根據要前往序列中的較高或較低頁面，使用不同的動畫。

分頁示範的錄製內容。類型會決定要使用的動畫。樣式表中的樣式會因啟用的轉場效果類型而有所不同。

在主動型別推出前，您可以將類別新增至 DOM，並在 CSS 中回應這些類別。不過，轉換完成後，您也必須進行清理。

您可以使用檢視區塊轉場效果類型達成相同結果，而且這些類型在檢視區塊轉場效果完成後，還會自動清除。只有在擷取或執行轉場效果時，才會套用型別。

如要進行同文件檢視區塊轉換，請將 types 傳遞至 startViewTransition 方法，該方法現在接受物件。update 是更新 DOM 的回呼函式，而 types 則是一連串的字串。

const direction = determineBackwardsOrForwards();

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

如要進行跨文件檢視區塊轉換，請使用 types 描述元，在 @view-transition at 規則中設定類型，或在 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 工作群組回報問題。在問題前加上 [css-view-transitions]。

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