View Transition API 可讓您在單一步驟中更新 DOM，同時產生兩種狀態之間的動畫轉換。
我包括我在內的開發人員經常要求進行這類轉場效果，所以在實現這些功能的過程中，我們相信在理想的預設設計上，能夠兼顧擴充性和自訂性與自訂性。聽起來我們正在來維修，但開發人員 意見回饋是這項功能的設計基礎。這項功能的原型設計較難靈活，而且投入時間投入原型設計並提供意見回饋後，大家都有重新思考的意義。感謝！
如要試用這項功能並實際操作，請參閱這份指南。如果您覺得那裡找不到所需資訊，請透過 Twitter、Mastodon 或電子郵件與我聯絡。
View Transition API 目前只能在 Chrome 中使用；幸好這個 API 可做為漸進式增強用途，本指南內含的輔助函式可用於不同瀏覽器，但只有支援檢視畫面轉場的瀏覽器才能呈現動畫。
我們在 CSS Working Group 中開發了這項功能，參考其他瀏覽器供應商和獨立供應商的意見。我們不知道其他瀏覽器是否也會採用檢視轉場效果，但請留意 Mozilla 的標準位置和 WebKit 的標準位置。
但我們不會「完成」！
Chrome 111 導入的功能只是首次發布版本。希望我們已經找到所有錯誤，但如果您在 crbug.com 發現任何問題 (最好減少試用版)。如果您不熟悉或不熟悉的功能，歡迎在 Twitter 上與我們聯絡、Mastodon 或透過電子郵件尋求協助。
這個版本只是整體而言有用的部位。我們為此規劃了部分擴充功能，確保目前運送中的零件與未來相容。
現在可以搶先瞭解我們目前的想法。這些不會按照優先順序排序 (第一位可能是對許多人來說最重要的)，因此我們想提供意見，告訴我們哪些新增功能對您而言最為重要。
文件之間的轉換
大多數開發人員都希望未來能再進行這個計畫，而且好消息是我們已在著手處理這個問題！
View Transitions API 經過特別設計，可用於同一來源文件。唯一的差別在於，導覽本身會發出變更，而不是 startViewTransition 表示 DOM 狀態變更。
我們在 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 像素遠超過 2000 個像素，導致時間不準確。
相反地，我們要加入選擇性加入計畫，系統會忽略元素，就像沒有 view-transition-name (如果元素完全位於可視區域之外)。
您可以從動態設定 style.viewTransitionName 的方式使用 JavaScript 執行此操作，但我們應該有宣告式解決方案。
requestAnimationFrame 驅動的動畫
您可以透過網頁動畫 API，使用 JavaScript 建立檢視畫面轉場動畫，但有時需要使用 requestAnimationFrame 逐一驅動畫面。
你已經這麼做了，但有點駭客入侵。請按這裡觀看示範影片，瞭解如何提供實用的協助。我們希望避免入侵！
我們會分成兩部分進行。一種，方法是提供 API 以指出動畫何時播放，第二種方法是提供 JavaScript 對虛擬元素的存取權。第二部分可能很艱難，但長期看來是該做的。
現在，您可以進行一些絕佳的觀看轉場效果！
希望你和我一樣，對這項功能的現在和未來都感到期待。如有任何意見，或單純希望展示觀看轉場效果 (無論是順暢且可正常運作)，還是純粹 無聊，歡迎透過 Twitter 或 Mastodon 與我們聯絡！