JavaScript探测CSS动画是否已经完成的方法
不啰嗦上代码:
WN:(function(){
varel=$('<fakeelement>'),
transition="transition",
transitionEnd,
animEvent={'start':null,'iteration':null,'end':null},
vendorPrefix;
transition=transition.charAt(0).toUpperCase()+transition.substr(1);
vendorPrefix=(function(){//现在的opera也是webkit
vari=0,vendor=["Moz","Webkit","Khtml","O","ms"];
while(i<vendor.length){
if(typeofel.css(vendor[i]+transition)==="string"){
returnvendor[i];
}
i++;
}
returnfalse;
})();
transitionEnd=(function(){
vartransEndEventNames={
WebkitTransition:'webkitTransitionEnd',
MozTransition:'transitionend',
OTransition:'oTransitionEndotransitionend',
transition:'transitionend'
}
for(varnameintransEndEventNames){
if(typeofel.css(name)==="string"){
returntransEndEventNames[name];
}
}
})();
animEvent.end=(function(){
varanimEndEventNames={
WebkitAnimation:'webkitAnimationEnd',
animation:'animationend'
}
for(varnameinanimEndEventNames){
if(typeofel.css(name)==="string"){
returnanimEndEventNames[name];
}
}
})();
animEvent.iteration=(function(){
varanimIterationEventNames={
WebkitAnimation:'webkitAnimationIteration',
animation:'animationiteration'
}
for(varnameinanimIterationEventNames){
if(typeofel.css(name)==="string"){
returnanimIterationEventNames[name];
}
}
})();
animEvent.start=(function(){
varanimStartEventNames={
WebkitAnimation:'webkitAnimationStart',
animation:'animationstart'
}
for(varnameinanimStartEventNames){
if(typeofel.css(name)==="string"){
returnanimStartEventNames[name];
}
}
})();
return{
called:false,
addTranEvent:function(elem,fn,duration){
varself=this;
varfncallback=function(){
if(!self.called){
fn();
self.called=true;
}
};
functionhand(){
elem.on(transitionEnd,function(){
//elem.unbind(transitionEnd,arguments.callee);
fncallback();
});
}
setTimeout(hand,duration);
},
addAnimEvent:function(elem,name,fn){
elem.on(animEvent[name],fn);
},
removeAnimEvent:function(elem,name,fn){
elem.unbind(animEvent[name],fn);
},
setStyleAttribute:function(elem,val){
if(Object.prototype.toString.call(val)==="[objectObject]"){
for(varnameinval){
if(/^transition|animation|transform/.test(name)){
varstyleName=name.charAt(0).toUpperCase()+name.substr(1);
elem.css(vendorPrefix+styleName,val[name]);
}else{
elem.css(name,val[name]);
}
}
}
}
};
})(),
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。
热门推荐
7 简短的二胎祝福语
10 简短霸气女儿生日 祝福语
11 祝福语高考小众诗句简短
12 元旦祝福语20秒简短
13 老师过年祝福语大全 简短
14 一生祝福语简短
15 产检祝福语简短霸气
16 朋友店开张祝福语简短
17 生日爱情祝福语大全简短
18 朋友女儿生日祝福语 简短