Document:startViewTransition() 方法
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
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 |
浏览器兼容性
BCD tables only load in the browser