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

Bramus

發布日期：2024 年 5 月 16 日

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

除此之外，我還分享了一些改善項目，讓您更輕鬆地處理一般檢視畫面轉場效果。

  • 使用 view-transition-class 在檢視畫面轉場虛擬元素之間共用動畫樣式。
  • 使用有效類型的選取檢視畫面轉場。

這些改善項目適用於單頁應用程式 (SPA) 和跨文件檢視的 MPA 轉換，適用於相同文件檢視轉換。

跨文件的 MPA 檢視轉場效果

瀏覽器支援

  • Chrome：126。
  • Edge：126。
  • Firefox：不支援。
  • Safari 技術預覽：支援。

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

很高興看到許多人使用檢視畫面轉場效果建構內容。從「讓縮圖變成大相片」的常見實作，到 Airbnb 這類高度客製化沉浸式體驗，真厲害！

Airbnb 顯示的相同文件檢視轉場效果。

不過，初始實作方式要求您建構 SPA，才能使用檢視畫面轉場效果。從 Chrome 126 開始，系統現在會預設為同源導覽啟用檢視畫面轉場效果。您現在可以在同源的兩份不同文件之間建立檢視畫面轉場效果。

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

@view-transition {
  navigation: auto;
}

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

如要自訂跨文件檢視轉場效果，請使用 pageswap 和 pagereveal 事件，以便存取檢視畫面轉換物件。

  • 有了 pageswap，您可以在舊快照擷取前，在即將離開的網頁上進行一些最後一刻的變更。
  • 使用 pagereveal 時，您可以在新頁面初始化後開始轉譯前，自訂新頁面。

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

為了進一步提升效能，您可以使用轉譯阻斷功能等待內容載入，並依賴預先轉譯，以縮短檢視畫面轉場執行前的載入時間。

示範

這個堆疊導覽器示範結合了上述所有功能 (並加上一些改善項目)。

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 共用動畫樣式

瀏覽器支援

  • Chrome：125。
  • Edge：125，
  • Firefox：不支援。
  • Safari 技術預覽：支援。

在此之前，如果要以相同方式為多個快照製作動畫，就必須針對每個具有專屬 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 專屬說明文件。

使用有效類型的選取檢視畫面轉場

瀏覽器支援

  • Chrome：125。
  • Edge：125。
  • Firefox：不支援。
  • Safari：18 歲。

在擷取及執行檢視畫面轉場時，我們也新增了可新增至檢視畫面轉場的類型。如此一來，就能更輕鬆地在相同頁面上處理各種檢視畫面轉場效果，而無需相互宣告。

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

Pagination 示範錄製過程。類型會決定要使用的動畫。根據有效的轉場類型，在樣式表中將樣式分開。

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

使用檢視畫面轉場類型，您可以獲得相同的結果，而且這些類型在檢視畫面轉場完成後會自動清除，只有擷取或執行轉場效果時，才能套用類型。

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

const direction = determineBackwardsOrForwards();

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

如要進行跨文件檢視轉場，請使用 types 描述元標記，在 @view-transition at-rule 中設定類型，或是在 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 錯誤。