用 View Transitions 做出像原生一樣的頁面切換

它是什麼

View Transitions API 讓瀏覽器替你處理畫面前後的快照與補間。你只需要給共享元素一個相同的 view-transition-name。

共享元素

列表中的標題與詳情頁的標題用同一個名字，點擊後它就會自己飛過去。再加上幾行 ::view-transition-old 與 ::view-transition-new，就能自訂淡入淡出的節奏。

.post h3 { view-transition-name: title; }#article h1 { view-transition-name: title; }::view-transition-group(title) {  animation-duration: .5s;}

不支援時怎麼辦

不支援的瀏覽器會直接跳轉，不會壞掉。這種漸進增強，是我最喜歡的動畫做法。