ViewTransition
Baseline
2025
Newly available
Since October 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or 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 |