View Transitions API：簡(jiǎn)化網(wǎng)頁動(dòng)畫的革新技術(shù)

View Transitions API 提供了一種更簡(jiǎn)便的方法來實(shí)現(xiàn)網(wǎng)頁元素間的動(dòng)畫效果，即使是在頁面加載之間也能流暢過渡。它是一種漸進(jìn)增強(qiáng)技術(shù)，具有良好的兼容性。

傳統(tǒng)的 CSS 過渡和動(dòng)畫在網(wǎng)頁特效方面取得了顯著成就，但並非所有動(dòng)畫都易於實(shí)現(xiàn)。例如，對(duì)包含十張圖片和標(biāo)題的列表進(jìn)行交叉淡入淡出動(dòng)畫，需要以下步驟：

1. 保留舊的 DOM 元素；
2. 創(chuàng)建新的 DOM 元素，並將其添加到頁面適當(dāng)?shù)奈恢茫?/li>
3. 淡出舊元素的同時(shí)淡入新元素；
4. （可選）用新 DOM 元素替換舊元素。

而 View Transitions API 簡(jiǎn)化了這一過程：

1. API 捕獲當(dāng)前頁面狀態(tài)的快照；
2. 更新 DOM，添加或刪除必要的元素；
3. API 捕獲新頁面狀態(tài)的快照；
4. API 使用默認(rèn)的淡入淡出效果或自定義 CSS 動(dòng)畫在兩個(gè)狀態(tài)之間進(jìn)行動(dòng)畫過渡。

我們只需更新 DOM，無需額外複雜的步驟。只需幾行代碼，即可在支持 View Transitions API 的瀏覽器中實(shí)現(xiàn)類似幻燈片的精美動(dòng)畫效果。

目前，該 API 處於實(shí)驗(yàn)階段，但最新的基於 Chromium 的瀏覽器已經(jīng)支持單頁面 DOM 動(dòng)畫效果。 Chrome 115 及更高版本還支持頁面加載間的動(dòng)畫效果，例如在典型的 WordPress 網(wǎng)站上。這使得使用更加簡(jiǎn)便，無需 JavaScript 代碼。

需要注意的是，Mozilla 和 Apple 尚未公佈其在 Firefox 和 Safari 中實(shí)現(xiàn)該 API 的計(jì)劃。不支持 View Transitions API 的瀏覽器仍能正常工作，因此現(xiàn)在添加此效果是安全的。

新舊技術(shù)的對(duì)比

資深開發(fā)者可能會(huì)感到似曾相識(shí)。早在 1997 年發(fā)布的 Internet Explorer 4.0 就引入了元素和整頁過渡功能，並在 2000 年發(fā)布的 IE5.5 中進(jìn)行了更新。我們可以使用 <meta> 標(biāo)籤添加 PowerPoint 風(fēng)格的各種過渡效果：

<meta content="progid:DXImageTransform.Microsoft.Iris(Motion='in', IrisStyle='circle')" http-equiv="Page-Enter">
<meta content="progid:DXImageTransform.Microsoft.Iris(Motion='out', IrisStyle='circle')" http-equiv="Page-Exit">

然而，這種技術(shù)並未得到廣泛採用，因?yàn)樗鼇K非 Web 標(biāo)準(zhǔn)。

創(chuàng)建頁面內(nèi)過渡效果

以下示例展示瞭如何在 Chrome 瀏覽器中使用 View Transitions API 創(chuàng)建簡(jiǎn)單的淡入淡出效果：

（此處應(yīng)嵌入 CodePen 示例 1 的鏈接和截圖）

HTML 代碼包含兩個(gè) <article></article> 元素，分別用於顯示不同的內(nèi)容塊：

（此處應(yīng)嵌入 HTML 代碼片段）

switchArticle() 函數(shù)處理所有 DOM 更新，通過添加或刪除 hidden 屬性來顯示或隱藏每個(gè) <article></article> 元素。頁面加載時(shí)，根據(jù)頁面 URL 的 location.hash 或第一個(gè) <article></article> 元素確定活動(dòng)的 <article></article> 元素：

（此處應(yīng)嵌入 JavaScript 代碼片段）

事件處理程序函數(shù)監(jiān)控所有頁麵點(diǎn)擊，並在用戶點(diǎn)擊帶有 #hash 的鏈接時(shí)調(diào)用 switchArticle()：

（此處應(yīng)嵌入 JavaScript 代碼片段）

通過將 switchArticle() 函數(shù)作為回調(diào)傳遞給 document.startViewTransition()，我們可以使用 View Transitions API：

（此處應(yīng)嵌入 JavaScript 代碼片段）

document.startViewTransition() 會(huì)捕獲初始狀態(tài)的快照，運(yùn)行 switchArticle()，捕獲新狀態(tài)的快照，並在兩者之間創(chuàng)建默認(rèn)的半秒鐘淡入淡出效果。

CSS 選擇器 ::view-transition-old(root) 和 ::view-transition-new(root) 可用於分別設(shè)置舊狀態(tài)和新狀態(tài)的動(dòng)畫效果：

（此處應(yīng)嵌入 CSS 代碼片段）

（後續(xù)內(nèi)容，包括更複雜的動(dòng)畫、異步DOM 更新、Web Animations API 的使用、多頁面導(dǎo)航過渡、動(dòng)畫禁用以及總結(jié)和常見問題解答，均需按照類似方式進(jìn)行改寫，將原文中的代碼和圖片嵌入到相應(yīng)位置，並用更簡(jiǎn)潔明了的語言進(jìn)行描述。）

以上是視圖過渡的簡(jiǎn)介API的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！