JavaScript有以下几个动画相关的事件:requestAnimationFrame该事件可以在浏览器重绘之前触发,通常用于制作高性能动画。下面是使用requestAnimationFrame制作简单动画的例子//获取要动画的元素letelement=document.getElementById("my-element");//初始化动画变量letx=0;lety=0;letstepX=2;letstepY=3;//定义动画函数functionanimate(){//更新元素x+=stepX的位置;y+=步骤Y;element.style.left=x+"px";element.style.top=y+"px";//使用requestAnimationFrame重复调用动画函数requestAnimationFrame(animate);}//启动动画animate();transitionend当CSS过渡完成时触发此事件。animationstart、animationiteration、animationendanimationstart事件在CSS动画开始播放时触发。animationiteration事件触发CSS动画的每次迭代。animationend事件在CSS动画结束时触发。如果你想在JavaScript中监听这些事件,你可以使用addEventListener或attachEvent方法。letelement=document.getElementById("my-element");//监听animationstart事件element.addEventListener("animationstart",function(){console.log("animationstarted");});//监听animationiteration事件元素.addEventListener("animationiteration",function(){console.log("animationiteration");});//监听animationend事件element.addEventListener("animationend",function(){console.log("动画结束");});请注意,在使用这些事件之前,您需要确保元素上存在有效的CSS动画。
