原生JS检测CSS3动画结尾方法详解

本文通过一个例子说明了检测CSS3动画是否由原生JS完成的方法。分享给大家参考，如下：

不知道大家在制作网页的时候有没有遇到过这样的情况：在使用CSS3的动画属性的时候，想要在动画完成之后添加一系列的操作，但是往往这些操作可能会在动画的同时或者动画完成之前发生。

针对这种情况，我们将使用js来监控动画是否结束，即其风格的过渡属性是否过渡；让我们通过一个简单的例子来理解我的句子的意思：

代码如下：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，Initial-scale=1.0 ' meta http-equiv=' x-ua-compatible ' content=' ie=edge ' title通过原生js /title style检测CSS3的动画结尾* { padd : 0 0；margin : 0；} .测试{ width: 200px高度： 200 px；border: 1px soli黑色；背景：红色；transition-property : width；过渡-持续时间： 3s；}/*动画*/. test . move { width :600 px；}按钮{ width: 80px高度： 25px；font-size : 16px；文本对齐：中心；线高： 25px；}/style/head body div class=' test ' id=' main '/div button id=' play ' start move/button/body script//示例动画主要通过检测transition的值是否为transition end函数init(){ var main=document . getelementbyid(' main ')；var play=document . getelementbyid(' play ')；var test=document . getelementsbyclassname(' test ')[0]；//兼容编写transitions={//兼容ie ' transition ' : ' transition end '，//兼容opera ' OTR transition ' : ' OTR transition end '，//兼容Firefox ' moz transition ' : ' transition end '，//兼容Google ' WebKit transition ' : ' WebKit transition end ' }；函数gettransations(){ var t；For (t in transitions) {//t表示transition，OTransition，moztalk，WebKit transition if(main . style[t]！==未定义){返回转换[t]；} } }//添加click事件的按钮play . onclick=function(){ main . class list . add(' move ')；};//接收当前浏览器var set transitions=get transitions()的transition返回值；//添加监听事件集转换主。addeventlistener(设置转换，函数(参数){alert('动画结束')；//删除类名move main . class list . remove(' move ')；}，false)} init()；/script/html的效果如下：

可见，只有动画结束后弹出的对话框才能验证该方法的可行性。

最后，这种方法还存在一些问题。比如改变宽度和高度两个属性，这个方法可能会触发两次以上，所以使用的时候要注意。

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

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

希望本文对JavaScript编程有所帮助。