今天我們想進一步說明 Chrome 和 Astro 運用 View Transitions API 的開發歷程。這包括 Astro 社群如何盡早參與 API 的實驗，並向廣大社群突顯其的可能性。我們也很高興提供關於 Astro 3.0 的全新內建檢視畫面轉換支援功能！
背景
在不同網頁狀態之間順利轉換，稱為「狀態轉換」，一直以來都是在網路上建立流暢、動畫體驗的複雜層面。儘管可以使用 CSS 轉換、CSS 動畫和 Web Animation API 等工具，建立狀態轉換仍是一項艱鉅的任務。其中一項挑戰是處理傳出元素的互動，這會讓轉場效果變得更加複雜。
此外，為輔助裝置保持閱讀位置和焦點並不容易。而且，處理捲動位置差異會讓狀態轉換變得繁瑣。上述所有因素都會導致網頁上多個元素之間的轉換都必須順暢。
View Transitions API 是瀏覽器因應這些挑戰的解決方案。這個新的 API 可讓您更輕鬆地在單一步驟變更 DOM，同時建立兩個狀態間的動畫轉換。
Chrome 111 版推出 View Transitions API，這是第一個針對所有網站 (而不只是以 JavaScript 為基礎的網頁應用程式) 提供轉換支援的開端。我們還會陸續推出更多功能，敬請拭目以待。Chrome 日後可能會探索令人期待的新內容，例如跨文件轉換、合成器導向的動畫、限定範圍轉場效果，以及巢狀轉換群組。
使用觀看轉場效果早期探索
Chrome 的 View Transitions API 並非孤單，在未來幾年內，開發人員、架構作者和 CSS Working Group 提出的意見回饋和合作，在塑造這項功能方面扮演了舉足輕重的角色。
開發人員實驗在初期就扮演著關鍵的角色。最早的 API 版本不支援 CSS 動畫，因此轉場效果只能在少數預設情況下使用。早期的意見回饋讓開發人員清楚瞭解，開發人員希望過渡時能完全靈活自訂轉換機制。我們來回合作，確保 API 的設計在良好的預設、擴充和自訂功能之間取得平衡。
Astro 是早期採用 View 轉場效果的其中一種架構。本文其餘部分來自 Astro 團隊的觀點，並說明他們尋找、採用 View Transitions，以及將 View Transitions 放在網頁開發體驗中最主要的感受。
星座在觀看轉換時停用的原因
太空過去一直在尋找類似檢視畫面轉場效果，Astro 是一種 JavaScript 網路架構，可讓伺服器將 UI 元件算繪為輕量 HTML，加快頁面載入速度。請盡可能設法將更多工作從用戶端裝置移出。Astro 網站採用原生的瀏覽器網頁瀏覽機制，因此其他網路架構可能會改以 JavaScript 用戶端轉送功能盜用瀏覽器瀏覽。
這個權衡利弊得失為：Astro 團隊面臨的挑戰為：在不採用用戶端轉送機制的情況下，Astro 該如何讓頁面轉換程序以動畫方式呈現，並維持與應用程式類似的 UI 持續性？
答案是「觀看轉場效果」。透過檢視畫面轉換，Astro 可以提供與使用大量 JavaScript SPA 網路架構的相同轉送功能，但不需要用戶端轉送作業的效能和複雜度。其他架構將 View 轉場作為選擇性實作詳細資料，但對於 Astro 來說，這個做法比以前高出許多。
宇宙團隊接著必須回答的問題是：如何？該團隊透過 Turbo、Swup 和 Livewire 等專案汲取靈感，甚至在宇宙中也設計了幾種類似的方法原型。
最早的其中一項做法就是全頁「智慧轉換」，系統會自動比對所有 HTML 新網頁與目前的 HTML，然後嘗試使用 JavaScript 一次替換所有元素。雖然條理清晰，但容易出錯。
// An early API design for enabling view transitions
// in Astro via top-level config. Never implemented.
export default defineConfig({
router: 'spa'
})
幸好，Astro 社群表示 View Transitions API 相當強大，而且產品不會太複雜。在早期看過一些示範內容後，Astro 團隊認為這個簡單的 Astro API 可盡可能比對瀏覽器 API。你不必將 View Transitions 顯示為隱藏在 Astro 內的隱形實作詳細資料，而是直接提供給開發人員。能直接與網路平台對齊，並降低前端的整體複雜度。
---
// Add a simple fade transition with 2 lines of code!
// 1. Import the <ViewTransitions> component
// 2. Add it to your common/base head component, or individual pages.
import { ViewTransitions } from 'astro:transitions';
---
<head>
<title>My View Transitions Demo</title>
<ViewTransitions />
</head>
<!-- ... -->
這項工作變得簡單明瞭：將新的 View Transitions API 導入至 Astro 方案，並提供自動備用功能，盡可能讓更多網站和瀏覽器使用。由於大多數瀏覽器 (Chrome 以外的瀏覽器) 尚未提供原生檢視畫面轉場的完整支援，因此備用支援是不可或缺的要件。
Astro 推出官方支援服務
Astro 在 Astro 2.9 中發布了實驗性的 View Transitions 支援。消費者立即收到回覆，開發人員開始分享各種應用實例的精彩示範，在某些情況下甚至還全面推出。
Astro 3.0 的最終版本將會完成支援，並為所有人取消標記新的 View Transitions API。這些新的 API 現已準備就緒，您可以選擇要採用實驗階段或一次性 API。
<main transition:animate="slide">
<p>Slide animation as you navigate to and from the page!</p>
</main>
<aside transition:name="my-aside">
<p>Animate and morph the matching "my-aside" element across pages automatically!</p>
</aside>
整合 Astro 與平台 API 的另一個好處是能夠在原生 View Transitions API 之上嘗試建構新功能。舉例來說，新的 Astro transition:persist 指令可讓任何元素在整頁導覽中持續存在。這項技術驅動長效型元素，例如持續性音訊與影片播放器，過去只有高強度 JavaScript SPA 才能實現這些優點。
<video controls="" autoplay="" transition:persist>
<source src="https://ia804502.us.archive.org/33/items/GoldenGa1939_3/GoldenGa1939_3_512kb.mp4" type="video/mp4">
</video>
此外，Astro 也能讓開發人員能更符合人體工學的 View Transitions。舉例來說，該團隊已經開始支援動態 HTML 的自訂快轉/倒轉動畫和動畫。這兩項功能只能透過低階 API 執行，但在 Astro 中幾乎可以輕鬆完成。
這些功能目前僅在 Astro 中推出，但 Astro 團隊希望將自身經驗提供給規格作者和工作團隊，以便因應日後可能推出的瀏覽器強化功能。舉例來說，您可以密切監控提案，更輕鬆地在 CSS 中分享動畫。
後續步驟
網路檢視畫面轉換的未來發展十分亮眼。Astro、Nutx 和 HTMX 均已提供一定程度的支援，許多其他公司也表達了他們的意願。
Chrome 團隊很高興 Astro 原生的 View 轉場支援。這是網站開發的重要步驟，可提供更多流暢且動態的使用者體驗。開發人員建議您深入瞭解 Astro 3.0 的 View 轉場效果。無論是建立新的到達網頁，還是升級現有網站，這些強化功能都能讓您扭轉局勢。藉由查看轉換轉場效果，填補 SPA 和 MPA 的空窗期。Chrome 想瞭解你的 SPA 和/或製造商零件編號是否仍有額外不足之處，歡迎與我們分享你的意見。如要進一步討論，歡迎您前往 View Transitions WICG GitHub 存放區留言。
許多創新產品示範和應用程式都是我們的靈感來源，我們也迫不及待想瞭解更多資訊。您與 View Transitions 合作的未來將形塑網路未來。在 Astro 中試用檢視畫面轉場效果，並分享你的工作，讓我們一起繼續這趟旅程。