css animation 动画开始事件和结束事件

追格官方小助手/ 2023年03月14日/ CSS教程/ 浏览 2871

如果想在 css animation 动画的开始和结束的时候,做相应的操作,只需要 js 监听相应的事件即可。


animationstart 动画开始事件、animationend 动画结束事件。


代码如下:


ele.addEventListener('animationstart', function () {
    console.log('动画开始了');
}, false);

ele.addEventListener('animationend', function () {
    console.log('动画结束了');
}, false);


此外,animation 还支持 animationiteration 事件,在动画每次重复时触发。如果,动画只执行一次,则不触发。


var i = 0;
ele.addEventListener('animationiteration',function(){
    i++;
    console.log('已经执行了' + i + '次')
},false);


发表评论

暂无评论,抢个沙发...

客服 工单