DOM移除动画

效果

点击色块删除DOM查看效果

源码

<!-- 关键点 view-transition-name 值不能重复 -->
<div @click="handleClick">
  <div style="view-transition-name: div1"></div>
  <div style="view-transition-name: div2"></div>
  <div style="view-transition-name: div3"></div>
  <div style="view-transition-name: div4"></div>
  <div style="view-transition-name: div5"></div>
</div>

const  handleClick = e =>{
  const target = e.target
  document.startViewTransition && document.startViewTransition(() => {
    target.hasAttribute('style') && target.remove()
  })
}

查看兼容性