AnimationEnd 事件侦听

CSS3 动画结束时是有触发事件的,这个之前竟然不了解。。除了JS动画如果做纯css3动画的时候使用 delay 延时来控制动画先后顺序,或者通过setTimeout来控制,其实完全可以通过侦听 animationEnd 的回调方法来依次控制动画。

tt.addEventListener("webkitAnimationStart", function(){ //动画开始时事件 
console.log(1);//动画开始时,控制台输出1 
}, false); 
tt.addEventListener("webkitTransitionEnd", function(){ //动画开始时事件 
console.log(1);//动画结束时,控制台输出1 
}, false); 
tt.addEventListener("webkitAnimationIteration", function(){ //动画重复运动时的事件 
console.log(3);//第一遍动作完成时,控制台输出3 
}, false); 

当然Jquery 也可以控制

 $('.dom').on("animationend webkitAnimationEnd",function(){
   $('.dom2').addClass('move');
 })

css3的过渡属性transition,在动画结束时,也存在结束的事件:webkitTransitionEnd;
注意:transition,也仅仅有这一个事件。

 $('.dom').on("transitionEnd webkitTransitionEnd",function(){
   $('.dom2').addClass('move');
 })
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在线阅读 http://interview.poetries.top[http://interview.poetr...
    前端进阶之旅阅读 114,633评论 24 450
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,792评论 0 2
  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 1,655评论 0 7
  • 一、HTML5 1.1 认识HTML5 HTML5并不仅仅只是作为HTML标记语言的一个最新版本,更重要的是它制定...
    福尔摩鸡阅读 16,075评论 14 51
  • akka9阅读 306评论 0 0