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事件可以监听结束