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 |
浏览器兼容性
加载中…