ViewTransition
ViewTransition 介面是 View Transition API 的一部分，它表示一個活動的檢視過渡，並提供了響應過渡到達不同狀態（例如，準備執行動畫，或動畫已完成）或完全跳過過渡的功能。
此物件型別可透過以下方式獲得：
- 對於同一文件（SPA）過渡，它由
document.startViewTransition()方法返回。 - 對於跨文件（MPA）過渡，它可透過以下方式獲得：
- 在傳出頁面中，透過
pageswap事件物件的PageSwapEvent.viewTransition屬性。 - 在傳入頁面中，透過
pagereveal事件物件的PageRevealEvent.viewTransition屬性。
- 在傳出頁面中，透過
當透過 startViewTransition() 呼叫（或 MPA 過渡中的頁面導航）觸發檢視過渡時，將遵循一系列步驟，具體說明請參見 檢視過渡過程。這也會解釋不同 Promise 何時 fulfilled。
例項屬性
ViewTransition.finished只讀-
一個
Promise，當過渡動畫完成，並且新頁面檢視對使用者可見且可互動時，該 Promise fulfilled。 ViewTransition.ready只讀-
一個
Promise，當偽元素樹建立完成並且過渡動畫即將開始時，該 Promise fulfilled。 ViewTransition.updateCallbackDone只讀-
一個
Promise，當document.startViewTransition()方法的回撥函式返回的 Promise fulfilled 時，該 Promise fulfilled。
例項方法
skipTransition()-
跳過檢視過渡的動畫部分，但不會跳過執行
document.startViewTransition()回撥函式來更新 DOM。
示例
在下面的 SPA 示例中，ViewTransition.ready Promise 用於觸發自定義的圓形揭露檢視過渡，該過渡從使用者點選位置散開，動畫由 Web Animations API 提供。
js
// Store the last click event
let lastClick;
addEventListener("click", (event) => (lastClick = event));
function spaNavigate(data) {
// Fallback for browsers that don't support this API:
if (!document.startViewTransition) {
updateTheDOMSomehow(data);
return;
}
// Get the click position, or fallback to the middle of the screen
const x = lastClick?.clientX ?? innerWidth / 2;
const y = lastClick?.clientY ?? innerHeight / 2;
// Get the distance to the furthest corner
const endRadius = Math.hypot(
Math.max(x, innerWidth - x),
Math.max(y, innerHeight - y),
);
// Create a transition:
const transition = document.startViewTransition(() => {
updateTheDOMSomehow(data);
});
// Wait for the pseudo-elements to be created:
transition.ready.then(() => {
// Animate the root's new view
document.documentElement.animate(
{
clipPath: [
`circle(0 at ${x}px ${y}px)`,
`circle(${endRadius}px at ${x}px ${y}px)`,
],
},
{
duration: 500,
easing: "ease-in",
// Specify which pseudo-element to animate
pseudoElement: "::view-transition-new(root)",
},
);
});
}
此動畫還需要以下 CSS，以關閉預設 CSS 動畫並阻止舊檢視和新檢視狀態以任何方式混合（新狀態“擦拭”舊狀態，而不是過渡進入）
css
::view-transition-image-pair(root) {
isolation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
animation: none;
mix-blend-mode: normal;
display: block;
}
規範
| 規範 |
|---|
| CSS 檢視過渡模組第 1 級 # viewtransition |
瀏覽器相容性
載入中…