Chrome 111開始支援單頁應用程式視圖切換

2023-06-30

Google將在Chrome 111支援View Transition API這項實驗性技術，View Transition API將讓開發者可以簡單更新DOM，在不同DOM狀態之間產生動畫轉換，還能進一步改變DOM的內容，簡化單頁應用程式切換畫面的開發工作。

視圖切換（View Transition）是一個流行設計方式，透過保留瀏覽畫面中的上下文，僅更新部分內容，有助於減少用戶的認知負荷，並且減少應用程式狀態或是畫面切換時，所造成的載入延遲。根據MDN網頁文件的資料，要在網頁上進行畫面轉換向來困難，在單頁應用程式（SPA）中的狀態切換，需要編寫許多複雜的CSS和JavaScript程式碼。

需要處理的部分包括新舊內容的載入和定位，還要創建動畫來從舊狀態過渡到新狀態，並處理當用戶意外點按到舊內容所可能導致的問題，最後在畫面切換完成後移除舊內容。另外，將新舊內容呈現在同一個位置，還需要處理閱讀位置遺失或焦點混亂等問題，而View Transition API向開發者提供一個處理DOM變更和動畫過渡的簡單方法。

在瀏覽器的支援上，主要瀏覽器中現在僅有Chrome 111支援，Edge則還在開發中階段，Firefox和Safari則尚未支援。Google提到，他們還會擴展View Transition API的支援，使功能更加完整。不過目前Chrome Canary中View Transition API暫時故障，想要試用該API的開發者，需要選擇Chrome 111穩定版或是Chrome 112測試版。

（相關資訊來自iThome）