如果想在 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);
-
css height 100% 无效解决方法如何让子元素撑满父元素
-
Typed.js打字效果js库的几种应用方式(7)我们可以通过css自定义指针样式,及css动画展示
-
jQuery 动画方法 animate 基础用法jQuery animate 方法简介
-
jQuery animate 动画 暂停 与 恢复执行jQuery animate 动画 暂停 与 恢复执行
-
css实现背景颜色半透明的两种方法及区别css实现背景颜色半透明的两种方法及区别
-
追格小站点评主题“H5资讯列表”标题调整为两行或多行的方法追格小站点评主题资讯列表的标题在H5模式下默认为一行,超出隐藏,我们可以通过调整css,将WordPress主题小站点评资讯列表标题调整为两行显示。
暂无评论,抢个沙发...