资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

原生JS检测CSS3动画是否结束的方法详解

本文实例讲述了原生JS检测CSS3动画是否结束的方法。分享给大家供大家参考,具体如下:

创新互联建站-专业网站定制、快速模板网站建设、高性价比洛南网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式洛南网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖洛南地区。费用合理售后完善,10多年实体公司更值得信赖。

不知道大家在做网页的时候有没有碰到这种情况:当你使用CSS3的动画属性时,想要在动画结束后添加一系列操作,但往往这些操作可能会发生在与动画同时出现或者是在动画还没结束时就发生了。

针对这种情况我们会使用js来监听动画是否结束即它的style的transition属性是否为transitionend;下面我们通过一个简单的例子来理解一下我这句话的含义:

代码如下:




  
  
  
  通过原生js检测CSS3的动画结束
  


  

效果如下:

原生JS检测CSS3动画是否结束的方法详解

可以看到当动画结束时才弹出弹框可以验证方法的可行性。

最后提一下,这个方法仍存在一些问题,比如你改变两个属性:宽度和高度,可能就会触发这个方法两次或者多次,所以使用的时候要注意一下。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试一下运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript运动效果与技巧汇总》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。


分享名称:原生JS检测CSS3动画是否结束的方法详解
当前路径:http://cdkjz.cn/article/ghspie.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220