transtionEnd需要添加前缀,并且存在多次触发问题,animationEnd也需要添加前缀,下面是一个临时性解决方案,解决了部分问题,完美方案探索中
(function(){ var body=document.body || document.documentElement, style=body.style; var vendorPrefix=(function(){ var i=0, vendor=["Moz", "Webkit", "Khtml", "O", "ms"]; transition=transition.charAt(0).toUpperCase() + transition.substr(1); while (i < vendor.length) { if (typeof style[vendor[i] + transition] === "string") { return vendor[i]; } i++; } return false; })(); var transitionEnd=(function(){ var transEndEventNames = { WebkitTransition : 'webkitTransitionEnd', MozTransition : 'transitionend', OTransition : 'oTransitionEnd otransitionend', transition : 'transitionend' } for(var name in transEndEventNames){ if(typeof style[name] === "string"){ return transEndEventNames[name] } } })(); var animationEnd=(function(){ if(vendorPrefix=="Webkit"){ return "webkitAnimationEnd"; }else{ return "animationend"; } }()); //解决多次触发问题,transitionEnd在多个属性变化时候会触发多次,子元素也会冒泡,造成父元素事件触发 //解决不触发问题,duration后检查是否触发,未触发则强制触发 function addTransitionEndOnce(ele,fn,duration){ var called = false; var callback = function(){ if (!called){ fn(); called = true; } }; var callbackEnd = function(){ callback(); setTimeout(callback, duration); ele.removeEventListener(transitionEnd, callbackEnd); } ele.addEventListener(transitionEnd, callbackEnd); } window.vendorPrefix = vendorPrefix; window.transitionEnd = transitionEnd; //animationEnd只加前缀,自行注册事件即可,不存在多次问题 window.animationEnd = animationEnd; window.addTransitionEnd = addTransitionEnd; });