ViewTransition: ready 属性
ready 是 ViewTransition 接口的一个只读属性，它返回一个 Promise。当伪元素树被创建并且过渡动画即将开始时，这个 Promise 会被 fulfilled。
如果过渡无法开始，ready 将会被 reject。这可能是由于配置错误造成的，例如重复的 view-transition-name，或者传递给 Document.startViewTransition() 的回调函数抛出异常或返回一个被 reject 的 Promise。
值
一个 Promise。
示例
在下面的示例中，ready 用于触发一个自定义的圆形展开视图过渡，该过渡从用户点击时的光标位置开始，动画由 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 级 # dom-viewtransition-ready |
浏览器兼容性
加载中…