View Transition API 可讓您在單一步驟中更新 DOM，同時在兩個狀態之間產生動畫轉場效果。
這類轉場效果是開發人員 (包括我自己) 經常要求的功能，我認為我們已成功推出這項功能，並在提供良好預設值的同時，兼顧延伸性和自訂選項。雖然這聽起來像是我們在自吹自擂，但開發人員的意見回饋確實是這項功能設計的關鍵。這項功能早期的原型彈性較低，而您等使用者花時間試用原型並提供意見，促使我們重新思考這項功能。感謝您！
如要瞭解這項功能，並試用一些示範，請參閱我們的指南。如果您認為這篇文章未涵蓋某些內容，歡迎透過 Twitter、Mastodon 或電子郵件與我聯絡。
View Transition API 目前僅適用於 Chrome，但好在可用於漸進式增強功能。指南中包含輔助函式，可跨瀏覽器使用，但只有支援檢視畫面轉場的瀏覽器才會顯示動畫。
我們在 CSS 工作小組內開發這項功能，並參考其他瀏覽器供應商和獨立供應商的意見。我們不確定其他瀏覽器是否會採用 View Transitions，也不知道何時會採用，但請密切留意 Mozilla 的標準立場和 WebKit 的標準立場。
但我們還沒「完成」！
Chrome 111 的功能只是第一個版本，我們希望已找出所有錯誤，但請在 crbug.com 中回報任何發現的問題，最好附上縮減版的示範。如果您不熟悉或不習慣這種做法，歡迎透過 Twitter、Mastodon 或電子郵件與我聯絡，我很樂意提供協助。
這項版本只是大局中的一小部分，但希望能對您有所助益。我們已為這項功能規劃一些擴充功能，確保我們今天出貨的零件日後能相容。
以下是我們正在考慮的內容。這些功能並未依優先順序排列 (不過，第一項功能對許多人來說可能最為重要)，因此我們非常歡迎您提供意見，告訴我們哪些新增功能對您來說最為重要。
在不同文件之間轉換
這是大多數開發人員希望我們下一個著手處理的項目，好消息是我們已經在著手處理了！
View Transitions API 的設計目的是讓它可在同源文件中運作。唯一的差異在於，導覽本身會傳送 DOM 狀態變更信號，而非 startViewTransition。
我們在 chrome://flags/#view-transition-on-navigation 標記後方提供此原型。以下是超簡單的示範和較複雜的示範。
為了推動這項計畫，我們需要瞭解各個網頁如何選擇採用轉換。我們目前使用中繼標記 <meta name="view-transition" content="same-origin">，但我們認為 CSS 更適合用於此。我們也希望讓您更輕鬆地瞭解從哪種網頁轉換，最好是不需要編寫 JavaScript。
我們還有許多工作要做，因此寧願「正確」推出這項功能，而非「快速」推出，但這絕對是我們優先考量的重點。
由合成器驅動的動畫
我們選擇預設為轉場群組設定寬度和高度的動畫，因為這樣更容易自訂。不過，這表示動畫會在主執行緒上執行，這不是理想做法，尤其是在網頁載入期間。
我們打算偵測預設動畫和常見的客製化項目，然後將這些項目重新解讀為由合成器驅動的動畫，以便大幅提升效能。
限定範圍轉場
目前，SPA 轉場效果的範圍為整份文件，且一次只能執行一個轉場效果。我們希望推出一項功能，讓轉場效果的範圍限定在特定元素，這樣一來，多個頁面元件就能獨立執行轉場效果。
舉例來說，這樣一來，嵌入式影片播放器就能使用檢視畫面轉場效果，同時也能使用嵌入式聊天小工具。
巢狀轉場群組
目前，所有 ::view-transition-group 都是兄弟姊妹。這通常是好事，因為這可讓檢視區塊從一個容器轉換至另一個容器，您不必擔心會遭到裁剪。
不過，有時您可能會希望某些父項裁剪檢視畫面，而這可能也涉及轉場。
我們想調查選擇加入功能，將特定 ::view-transition-group 放在另一個 ::view-transition-group 中。
轉場類別
每個 view-transition-name 不得重複。因此，我們會判斷特定元素在 DOM 變更的兩側是否在概念上「相同」，即使實際上並非相同元素也一樣。
不過，有時不同 view-transition-name 的物件應使用相同類型的動畫。目前這表示您必須為每個 view-transition-name 新增選取器規則。
我們想新增一種方法來建立轉場類別，以克服這項限制。
忽略畫面外元素
如果您為元素指定 view-transition-name，該元素就會以群組形式參與轉場。但有時這並非理想做法。舉例來說，如果您為標題指定 view-transition-name，並從向下捲動 2000 像素的狀態，變更為頁面頂端的狀態，標題就會從 2000 像素遠處顯示動畫，這在時間上會顯得有問題。
相反地，如果元素完全位於檢視區範圍之外，我們建議您加入選用功能，忽略該元素，就好像該元素沒有 view-transition-name 一樣。
您可以透過 JavaScript 動態設定 style.viewTransitionName 來執行這項操作，但我們認為應該提供宣告式解決方案。
由 requestAnimationFrame 驅動的動畫
您已經可以透過 web animations API 使用 JavaScript 建立檢視畫面轉場動畫，但有時您可能需要使用 requestAnimationFrame 逐格控制畫面。
您已經可以這樣做，但這有點不太方便。以下是示範影片，其中包含一些可能對您有用的輔助工具。我們希望能讓這項功能不容易遭到入侵！
我們會分兩部分進行。第一個方法是提供 API，指出動畫何時完成。其次，提供 JavaScript 存取擬元素的權限。雖然第二部分的工作量相當龐大，但從長遠來看，這似乎是正確的做法。
接著，您可以製作出色的轉場效果！
希望你也和我一樣，對這項功能的現在和未來感到興奮。如有任何意見回饋，或想展示您製作的流暢且實用的或單純 有趣的轉場效果，歡迎透過 Twitter或 Mastodon 與我聯絡！