Document：startViewTransition() 方法
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.
* Some parts of this feature may have varying levels of support.
View Transitions API 的 startViewTransition() 方法开始一个新的视图过渡，并返回一个 ViewTransition 对象来表示它。
当调用 startViewTransition() 时，将按照视图过渡过程中所述的步骤序列进行。
语法
js
startViewTransition(callback) 参数
返回值
一个 ViewTransition 对象实例。
示例
基本用法
在基础视图过渡演示中，updateView() 函数处理支持和不支持 View Transitions API 的浏览器。在支持的浏览器中，我们调用 startViewTransition() 来启动视图过渡，而不关心返回值。
js
function updateView(event) { // 处理在 <a> 或 <img> 上触发事件的差异 let targetIdentifier; if (event.target.firstChild === null) { targetIdentifier = event.target; } else { targetIdentifier = event.target.firstChild; } const displayNewImage = () => { const mainSrc = `${targetIdentifier.src.split("_th.jpg")[0]}.jpg`; galleryImg.src = mainSrc; galleryCaption.textContent = targetIdentifier.alt; }; // 浏览器不支持 View Transitions 时的回退方案： if (!document.startViewTransition) { displayNewImage(); return; } // 开始一次视图过渡： const transition = document.startViewTransition(() => displayNewImage()); } 规范
| Specification |
|---|
| CSS View Transitions Module Level 1 # dom-document-startviewtransition |
| CSS View Transitions Module Level 2 # dom-document-startviewtransition |