js监听css3动画

主要使用animationstart,animationiteration(重复播放的监听),animationend(结束)以及transtionend(过渡完成的监听)

代码如下:

var $main = $('.main');

    $main.on('click', function() {

      $(this).addClass('change-size')

    });

    $main.on('animationstart', function(e) {

      console.log('animationstart:' + e.elapsedTime)

    });

    $main.on('animationiteration', function(e) {

      console.log('animationiteration:' + e.elapsedTime)

    });

    $main.on('animationend', function(e) {

      console.log('animationend:' + e.elapsedTime)

    });

    $main.on('transitionend', function(e) {

      console.log('transitionend:' + e.elapsedTime)

    });

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

推荐阅读更多精彩内容