今天，我們想進一步分享 Chrome 和 Astro 使用View Transitions API 的歷程。這包括 Astro 社群如何及早接受並嘗試使用 API，並向更廣大的社群強調這項 API 的可能性。我們也非常高興能進一步說明 Astro 3.0 中內建的 View 轉場支援功能！
背景
在網頁的不同狀態之間進行無縫轉場 (稱為「狀態轉場」)，一直是建構流暢動畫網頁體驗的複雜面向。雖然 CSS 轉場、CSS 動畫和 Web Animation API 等工具可供使用，但建立狀態轉換仍是一項艱鉅的任務。其中一個挑戰是處理傳出元素的互動，這可能會使轉場效果更複雜。
此外，輔助裝置很難維持閱讀位置和焦點。處理捲動位置差異會讓狀態轉換變得繁瑣。所有這些因素都會導致在網頁上實作各個元素之間平順轉場的複雜度增加
View Transitions API 是瀏覽器解決這些挑戰的解決方案。這個新的 API 提供更簡單的方法，可在單一步驟中變更 DOM，並在兩個狀態之間建立動畫轉換。
在 Chrome 111 中推出 View Transitions API，標誌著我們開始將過渡效果支援範圍擴大到所有網站，而非僅限於以 JavaScript 為基礎的網頁應用程式。我們也正在規劃日後的改善項目。日後 Chrome 可能會推出令人期待的新功能，例如跨文件轉場效果、轉場效果的範圍、巢狀轉場效果群組，以及轉場效果驅動的動畫。
使用檢視畫面轉場效果進行初期探索
Chrome 使用 View Transitions API 的歷程並非孤軍奮戰。開發人員、架構作者和 CSS 工作小組的意見回饋和合作，在過去幾年塑造這項功能的過程中，都扮演了至關重要的角色。
開發人員實驗在早期扮演了關鍵角色。早期版本的 API 不支援 CSS 動畫，轉場效果也僅限於少數限制性預設值。早期的意見回饋清楚指出，開發人員希望轉場效果能夠完全自訂且具有表現力。透過這種雙向合作，我們確保 API 設計能兼顧良好的預設值、擴充性和自訂功能。
Astro 就是其中一個早期採用 View Transitions 的架構。本文其餘部分將從 Astro 團隊的角度出發，分享他們在發現、採用及將 View Transitions 納入網頁開發體驗時的經驗。
為何 Astro 會押寶在轉換成效
Astro 一直在尋找類似 View Transitions 的功能，Astro 是一種 JavaScript 網路架構，可將 UI 元件以輕量 HTML 呈現至伺服器，加快網頁載入效能。Astro 會盡可能將工作移出用戶端裝置。Astro 網站使用原生瀏覽器網頁導覽，其他網頁架構可能會使用 JavaScript 用戶端路由劫持瀏覽器導覽。
這項權衡為 Astro 團隊帶來了挑戰：如何在不採用用戶端轉送的情況下，讓 Astro 為網頁轉場加上動畫效果，並在各網頁之間提供類似應用程式的 UI 持久性？
答案就是「View Transitions」。有了 View Transitions，Astro 就能提供與 JavaScript 密集 SPA 網路架構相同的路徑功能，但不會造成效能和複雜性負擔的用戶端路徑。其他架構將 View Transitions 視為可選的實作細節，但對 Astro 來說，這項功能的重要性遠不止於此。
接下來，Astro 團隊必須回答「如何」這個問題。他們參考了 Turbo、Swup 和 Livewire 等專案的設計，甚至在 Astro 中製作了幾種類似的設計原型。
最早的嘗試之一是全頁「智慧轉換」，會自動比較每個新 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 內的無形實作細節。將 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 以外的大多數瀏覽器尚未提供原生 View 轉場功能的完整支援。
在 Astro 推出官方支援
Astro 在 Astro 2.9 中發布了實驗性的 View 轉場支援功能。他們立即給予正面回應，開發人員開始分享許多不同用途的絕佳示範，在某些情況下甚至將這些示範送交至實際工作環境。
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 轉場效果。舉例來說，團隊已新增自訂前進/後退動畫和動態 HTML 動畫支援功能。這兩項功能都很難單獨使用較低層級 API 實現，但在 Astro 中，這兩項功能幾乎不費吹灰之力就能實現。
這些功能目前僅在 Astro 中提供，但 Astro 團隊希望將他們的使用經驗回饋給規格作者和工作小組，以便日後推出可能的瀏覽器強化功能。例如，密切監控提案，方便在 CSS 中分享動畫。
後續步驟
網頁上的 View 轉場效果前景一片光明。Astro、Nuxt 和 HTMX 都已提供某種程度的支援，許多其他服務也都表示有興趣。
Chrome 團隊很高興 Astro 支援原生 View 轉場功能。這對網頁開發而言是一大進步，可提供更流暢、更動態的使用者體驗。開發人員，我們建議您深入瞭解 Astro 3.0 中的 View 轉場效果。無論您是建立新的到達網頁，還是升級現有網站，這些強化功能都會帶來重大改變。檢視畫面轉場功能可彌補 SPA 和 MPA 之間的差距。Chrome 很樂意聽取你的意見，瞭解是否還有其他 SPA 和/或 MPA 支援方面的缺失。歡迎在 View Transitions WICG GitHub 存放區中留言，進一步討論這個問題。
我們已經看到許多創新的示範和應用程式，並且期待看到更多內容。您使用 View Transitions 的成果，將塑造網路的未來。歡迎在 Astro 中試用 View Transitions，並分享您的作品，讓我們一起繼續這趟旅程。