Web Animations API 动画

 Element.animate()

dom.animate动画可以避免污染dom原有的css动画

参考资料

Element.animate() - Web API 接口参考 | MDN

Element: getAnimations() method - Web APIs | MDN

.tunnel{width:200px;height:200px;background-color:#38f;}

<div class="tunnel" id="tunnel">dom的animate动画</div>


Promise.all(
  document.getElementById("tunnel").getAnimations().map((animation) => {
   setTimeout(()=>{
    animation.cancel()
   },500)
  console.log('======animation',animation);
  animation.onfinish=()=>{
    console.log('======动画结束');
  }
  animation.oncancel=()=>{
    console.log('======oncanceloncanceloncancel');
  }
    animation.onremove=()=>{
    console.log('======removeremove');
  }
  return animation.finished
  }),
).then(() => document.getElementById("tunnel").style.backgroundColor='#f00');

 

    document.getElementById("tunnel").animate(
  [
    // keyframes
    { transform: "translateY(0px)" },
    { transform: "translateY(-300px)" },
  ],
 {duration: 1000,
  fill: 'forwards',
  iterations: 1,}
);

 好处是可以不干扰dom原本的动画,onfinish事件可以监听结束