Element.startViewTransition方法实例页面

回到相关文章 »

效果：

代码：

HTML代码：

<div id="container">
  <img id="img" src="hanyun.jpg" width="128">
</div>

<p>
  <button id="brm">删除图片</button>
</p>

JS代码：

const img = document.getElementById('img');
brm.onclick = () => {
  container.startViewTransition(() => {
    if (container.contains(img)) {
      img.remove();
      brm.textContent = '还原';
    } else {
      container.appendChild(img);
      brm.textContent = '删除图片';
    }
  });
}