::view-transition-new实现图片放大动画实例页面

CSS代码：

img:last-child {
    view-transition-name: wooo;
}
::view-transition-new(wooo) {
    animation: scaleUp 1s;
}
@keyframes scaleUp {
  from {
    transform: scale(0.1);
  }
  to {
    transform: scale(1);
  }
}

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);
    });  
};