ViewTransition
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
View Transitions API 的 ViewTransition 接口表示视图过渡，并提供了在过渡到达不同状态时运行代码的功能（例如，准备运行动画，或动画完成），或跳过视图过渡。
此对象类型由 document.startViewTransition() 方法返回。当调用 startViewTransition() 时，将按照视图过渡过程中所述的步骤序列进行。这也解释了不同的 Promise 何时兑现。
实例属性
ViewTransition.finished实验性-
一个在过渡动画完成后兑现的
Promise，新的页面视图对用户可见且可交互。 ViewTransition.ready实验性-
一个在伪元素树创建且过渡动画即将开始时兑现的
Promise。 ViewTransition.updateCallbackDone实验性-
当
document.startViewTransition()的回调返回的Promise兑现时，该Promise也会兑现。
实例方法
skipTransition()实验性-
跳过视图过渡的动画部分，但不会跳过运行
document.startViewTransition()的回调，该回调会更新 DOM。
示例
在下面的示例中，ViewTransition.ready 用于触发从用户点击位置开始的自定义圆形揭示视图过渡，动画由 Web Animations API 提供。
js
// 保存最后一次点击事件 let lastClick; addEventListener("click", (event) => (lastClick = event)); function spaNavigate(data) { // 为不支持此 API 的浏览器提供回退方案： if (!document.startViewTransition) { updateTheDOMSomehow(data); return; } // 获取点击位置，或者回退到屏幕中间 const x = lastClick?.clientX ?? innerWidth / 2; const y = lastClick?.clientY ?? innerHeight / 2; // 获取到最远角的距离 const endRadius = Math.hypot( Math.max(x, innerWidth - x), Math.max(y, innerHeight - y), ); // 开始一次视图过渡： const transition = document.startViewTransition(() => { updateTheDOMSomehow(data); }); // 等待伪元素创建完成： transition.ready.then(() => { // 新视图的根元素动画 document.documentElement.animate( { clipPath: [ `circle(0 at ${x}px ${y}px)`, `circle(${endRadius}px at ${x}px ${y}px)`, ], }, { duration: 500, easing: "ease-in", // 指定要附加动画的伪元素 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; } 规范
| Specification |
|---|
| CSS View Transitions Module Level 1 # viewtransition |
浏览器兼容性
Loading…