startViewTransition实现图片插入淡入效果实例页面

回到相关文章 »

效果：

无View Transitions

使用View Transitions

代码：

HTML代码：

<h4 class="fill">无View Transitions</h4>  
<button id="b1">添加图片</button>

<h4 class="fill">使用View Transitions</h4>    
<button id="b2">添加图片</button>

JS代码：

const src = '1.jpg';
b1.onclick = function () {
    const img = new Image();
    img.src = src;
    
    this.after(img);
};

b2.onclick = function () {
    const img = new Image();
    img.src = src;
    
    document.startViewTransition(() => {    
        this.after(img);
    });  
};