太絲滑了！了解一下原生的視圖轉換動畫 View Transitions API
在原生 APP 中，我們經常會看到那種絲滑又舒適的頁面切換動畫，比如這樣的
Android 里一般稱之為共享元素（shareElement）動畫，也就是動畫前后有一個（或多個）相同的元素，起到前后過渡的效果，可以很清楚的看到元素的變化過程，而并不是簡單的消失和出現。
現在，web 中（Chrome 111+）也迎來了這樣一個特性，叫做視圖轉換動畫 View Transitions[1]，又稱“轉場動畫”，也能很輕松的實現這類效果，一起了解一下吧！
一、快速認識 View Transition
先從一個簡單的例子來認識一下。
比如，下面有一個網格列表：
<div class="list" id="list">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>簡單修飾后如下：
然后我們實現一個簡單交互，點擊每個元素，元素就會被刪除。
list.addEventListener('click', function(ev){
if (ev.target.className === 'item') {
ev.target.remove()
}
})可以得到這樣的效果。
功能正常，就是有點太過生硬了。
現在輪到 View Transitions 出場了！我們只需要在改變狀態的地方添加document.startViewTransition，如下：
list.addEventListener('click', function(ev){
if (ev.target.className === 'item') {
document.startViewTransition(() => { // 開始視圖變換
ev.target.remove()
});
}
})當然為了兼容不支持的瀏覽器，可以做一下判斷。
list.addEventListener('click', function(ev){
if (document.startViewTransition) { // 如果支持就視圖變換
document.startViewTransition(() => { // 開始視圖變換
ev.target.remove()
});
} else { // 不支持就執行原來的邏輯
ev.target.remove()
}
})現在效果如下：
刪除前后現在有一個淡入淡出的效果了，也就是默認的動畫效果，我們可以把這個動畫時長設置大一點，如下：
::view-transition-old(root), /* 舊視圖*/
::view-transition-new(root) { /* 新視圖*/
animation-duration: 2s;
}這兩個偽元素我們后面再做介紹，先看效果：
是不是明顯感覺過渡變慢了許多？
但是這種動畫還是不夠舒服，是一種整體的變化，看不出刪除前后元素的位置變化。
接下來我們給每個元素指定一個標識，用來標記變化前后的狀態，為了方便控制，可以借助 CSS 變量。
<div class="list" id="list">
<div class="item" style="--i: a1">1</div>
<div class="item" style="--i: a2">2</div>
<div class="item" style="--i: a3">3</div>
<div class="item" style="--i: a4">4</div>
<div class="item" style="--i: a5">5</div>
<div class="item" style="--i: a6">6</div>
<div class="item" style="--i: a7">7</div>
<div class="item" style="--i: a8">8</div>
<div class="item" style="--i: a9">9</div>
<div class="item" style="--i: a10">10</div>
</div>這里通過view-transition-name來設置名稱。
.item{
view-transition-name: var(--i);
}然后可以得到這樣的效果，每個元素在變化前后會自動找到之前的位置，并且平滑的移動過去，如下：
完整代碼可以查看
- view-transition sort (juejin.cn)[2]
- view-transition sort (codepen.io)[3]
是不是非常絲滑？這就是 View Transitions 的魅力！
二、View Transition 的核心概念
為啥僅僅加了一點點代碼就是實現了如此順暢的動畫呢？為啥瀏覽器可以知道前后的元素位置關系呢？這里簡單介紹一下變化原理。
整個 JS 部分只有一行核心代碼，也就是document.startViewTransition，表示開始視圖變換。
document.startViewTransition(() => {
// 變化操作
});整個過程包括 3 部分
- 調用document.startViewTransition，瀏覽器會捕捉當前頁面的狀態，類似于實時截圖，或者“快照”。
- 執行實際的 dom 變化，再次記錄變化后的頁面狀態（截圖）。
- 觸發兩者的過渡動畫，包括透明度、位移等變化，也可以自定義 CSS 動畫。
下面是一個示意圖：
在動畫執行的過程中，還會在頁面根節點自動創建以下偽元素。
::view-transition
└─ ::view-transition-group(root)
└─ ::view-transition-image-pair(root)
├─ ::view-transition-old(root)
└─ ::view-transition-new(root)下面是控制臺的截圖。
其中，::view-transition-old表示「舊視圖」的狀態，也就是變化之前的截圖，::view-transition-new表示「新視圖」的狀態，也就是變化之后的截圖。
默認情況下，整個頁面root都會作為一個狀態，也就是上面的::view-transition-group(root)，在切換前后會執行淡入淡出動畫，如下：
:root::view-transition-new(root) {
animation-name: -ua-view-transition-fade-in; /*淡入動畫*/
}
:root::view-transition-old(root) {
animation-name: -ua-view-transition-fade-out; /*淡出動畫*/
}這也是為什么在使用了document.startViewTransition后整個頁面會有淡入淡出的效果了。
為了讓每個元素都有自己的過渡狀態，這里需要給每個元素都指定名稱。
.item{
view-transition-name: item-1;
}這樣指定名稱后，每個名稱都會創建一個::view-transition-group，表示獨立的分組。
這樣在變化前后view-transition-name相同的部分就會一一自動執行過渡動畫了，以第4、5個元素為例（在3刪除以后）。
最后就會得到這樣的效果。
核心概念就這些了，下面再來看幾個例子。
三、不同元素之間的過渡
視圖變化其實和元素是否相同沒有關聯，有關聯的只有view-transition-name，瀏覽器是根據view-transition-name尋找的，也就是相同名稱的元素在前后會有一個過渡動畫。
比如下面這樣一個例子。
每個按鈕在打開彈窗時，都可以清楚的看到彈窗是從哪里出現的，如何實現這樣的效果呢？
從本質上看，其實就是「按鈕到彈窗的視圖變換」，按照前面講到的，可能會想到給前后加上相同的view-transition-name，下面是HTML結構。
<div class="bnt-group" id="group">
<button>按鈕1</button>
<button>按鈕2</button>
<button>按鈕3</button>
</div>
<dialog id="dialog">
<form method="dialog">
我是彈窗
<button>關閉</button>
</form>
</dialog>嘗試一下。
button,dialog{
view-transition-name: dialog;
}然后添加點擊打開彈窗事件。
group.addEventListener('click', function(ev){
if (ev.target.tagName === 'BUTTON') {
if (document.startViewTransition) {
document.startViewTransition(() => {
dialog.showModal()
});
} else {
dialog.showModal()
}
}
})這樣會有什么問題嗎？運行如下：
很明顯報錯了，意思就是一個頁面中不能有相同的view-transition-name。嚴格來講，是「不能同時出現」，如果其他元素都是隱藏的，只有一個是顯示的，也沒有問題。其實仔細想一下，也很好理解，如果同時有兩個相同的名稱，并且都可見，最后變換的時候該以哪一個為準呢？
所以，在這種情況下，正確的做法應該是動態設置view-transition-name，比如默認不給按鈕添加名稱，只有在點擊的時候才添加，然后在變換結束之后再移除按鈕的view-transition-name，實現如下：
group.addEventListener('click', function(ev){
if (ev.target.tagName === 'BUTTON') {
ev.target.style.viewTransitionName = 'dialog' // 動態添加 viewTransitionName
if (document.startViewTransition) {
document.startViewTransition(() => {
ev.target.style.viewTransitionName = '' // 結束后移除 viewTransitionName
dialog.showModal()
});
} else {
dialog.showModal()
}
}
})這樣就實現了動態縮放的效果：
大致已經實現想要的效果，不過還有一個小問題，我們把速度放慢一點（把動畫時長設置長一點）。
可以清楚的看到，原本的按鈕先放大到了彈窗大小，然后逐漸消失。這個過程是我們不需要的，有沒有辦法去掉呢？
當然也是可以的！原本的按鈕其實就是舊視圖，也就是點擊之前的截圖，我們只需要將這個視圖隱藏起來就行了。
::view-transition-old(dialog) {
display: none;
}這樣就完美實現了從哪里點擊就從哪里打開的效果：
完整代碼可以查看：
- view-transition-dialog (juejin.cn)[4]
- view-transition-dialog (codepen.io)[5]
四、自定義過渡動畫
通過前面的例子可以看出，默認情況下，視圖轉換動畫是一種淡入淡出的動畫，然后還有如果位置、大小不同，也會平滑過渡。
除此之外，我們還可以手動指定過渡動畫。比如下面這個例子。
這是一個黑暗模式的簡易模型，實現也非常簡單，準備兩套主題，這里用color-scheme實現。
.dark{
color-scheme: dark;
}然后通過點擊動態給html切換dark類名。
btn.addEventListener('click', function(ev){
document.documentElement.classList.toggle('dark')
})這樣就得到了主題切換效果：
接著，我們添加視圖轉換動畫。
btn.addEventListener('click', function(ev){
if (document.startViewTransition) {
document.startViewTransition(() => {
document.documentElement.classList.toggle('dark')
});
} else {
document.documentElement.classList.toggle('dark')
}
})這樣就得到了一個默認的淡入淡出的切換效果（為了方便觀察，將動畫時長延長了）。
你可以把前后變化想象成是兩張截圖的變化，如果要實現點擊出現圓形裁剪動畫，其實就是在新視圖上執行一個裁剪動畫，由于是完全重疊的，所以看著像是一種穿透擴散的效果：
動畫很簡單，就是一個clip-path動畫。
@keyframes clip {
from {
clip-path: circle(0%);
}
to{
clip-path: circle(100%);
}
}我們把這個動畫放在::view-transition-new中。
::view-transition-new(root) {
/* mix-blend-mode: normal; */
animation: clip .5s ease-in;
/* animation-duration: 2s; */
}效果如下：
是不是還有點奇怪？這是因為默認的一些樣式導致，包括原有的淡出效果，還有混合模式。
所以還需要去除這些影響。
::view-transition-old(root) {
animation: none;
}
::view-transition-new(root) {
mix-blend-mode: normal;
animation: clip .5s ease-in;
}當然你可以把鼠標點擊的位置傳遞到頁面根節點。
btn.addEventListener('click', function(ev){
document.documentElement.style.setProperty('--x', ev.clientX + 'px')
document.documentElement.style.setProperty('--y', ev.clientY + 'px')
if (document.startViewTransition) {
document.startViewTransition(() => {
document.documentElement.classList.toggle('dark')
});
} else {
document.documentElement.classList.toggle('dark')
}
})動畫里直接通過CSS 變量獲取。
@keyframes clip {
from {
clip-path: circle(0% at var(--x) var(--y));
}
to{
clip-path: circle(100% at var(--x) var(--y));
}
}這樣就實現了完美的擴散切換效果：
完整代碼可以查看：
- view transition theme change - (juejin.cn)[6]
- view transition theme change (codepen.io)[7]
五、其他案例
找了幾個有趣的例子。
只要涉及到前后過渡變化的，都可以考慮用這個特性，例如下面的拖拽排序。
Android https://mp.weixin.qq.com/s/v8XwlqLAtCxxYG2FOvatFw。
再比如這樣一個數字過渡動畫。
https://mp.weixin.qq.com/s/v8XwlqLAtCxxYG2FOvatFw
還有類似于 APP 的轉場動畫（多頁面跳轉）
五、總結和說明
總的來說，原生的視圖轉換動畫可以很輕松的實現兩種狀態的過渡，讓 web 也能實現媲美原生 APP 的動畫體驗，下面再來回顧一下整個變化過程：
- 調用document.startViewTransition，瀏覽器會捕捉當前頁面的狀態，類似于實時截圖，或者“快照”。
- 執行實際的 dom 變化，再次記錄變化后的頁面狀態（截圖）。
- 觸發兩者的過渡動畫，包括透明度、位移等變化，也可以自定義 CSS 動畫。
- 默認情況下是整個頁面的淡入淡出變化。
- ::view-transition-old表示「舊視圖」的狀態，也就是變化之前的截圖，::view-transition-new表示「新視圖」的狀態，也就是變化之后的截圖。
- 如果需要指定具體元素的變化，可以給該元素指定view-transition-name。
- 前后變化不一定要同一元素，瀏覽器是根據view-transition-name尋找的。
- 同一時間頁面上不能出現兩個相同view-transition-name的元素，不然視圖變化會失效。
另外，視圖轉換動畫應該作為一種「體驗增強」的功能，而非必要功能，在使用動畫時其實拖慢了頁面打開或者更新的速度，并且在動畫過程中，頁面是完全“凍結”的，做不了任何事情，因此需要衡量好動畫的時間，如果頁面本身就很慢就更不要使用這些動畫了。
[1]View Transitions： https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API
[2]view-transition sort (juejin.cn)： https://code.juejin.cn/pen/7268263402853072931
[3]view-transition sort (codepen.io)： https://codepen.io/xboxyan/pen/BavBevP
[4]view-transition-dialog (juejin.cn)： https://code.juejin.cn/pen/7268262983178911779
[5]view-transition-dialog (codepen.io)： https://codepen.io/xboxyan/pen/WNLeBgY
[6]view transition theme change - (juejin.cn)： https://code.juejin.cn/pen/7268257573277532219
[7]view transition theme change (codepen.io)： https://codepen.io/xboxyan/pen/poqzmLY
