不啰嗦上代码:
'),transition="transition",transitionEnd,animEvent={'start':null,'iteration':null,'end':null},vendorPrefix;
原文链接:https://www.f2er.com/js/46220.html transition = transition.charAt(0).toUpperCase() + transition.substr(1);
vendorPrefix=(function(){//现在的opera也是webkit
var i=0,vendor=["Moz","Webkit","Khtml","O","ms"];
while (i < vendor.length) {
if (typeof el.css(vendor[i] + transition) === "string"){
return vendor[i];
}
i++;
}
return false;
})();
transitionEnd=(function(){
var transEndEventNames = {
WebkitTransition : 'webkitTransitionEnd',MozTransition : 'transitionend',OTransition : 'oTransitionEnd otransitionend',transition : 'transitionend'
}
for(var name in transEndEventNames){
if(typeof el.css(name) === "string"){
return transEndEventNames[name];
}
}
})();
animEvent.end=(function(){
var animEndEventNames = {
WebkitAnimation : 'webkitAnimationEnd',animation : 'animationend'
}
for(var name in animEndEventNames){
if(typeof el.css(name) === "string"){
return animEndEventNames[name];
}
}
})();
animEvent.iteration=(function(){
var animIterationEventNames = {
WebkitAnimation : 'webkitAnimationIteration',animation : 'animationiteration'
}
for(var name in animIterationEventNames){
if(typeof el.css(name) === "string"){
return animIterationEventNames[name];
}
}
})();
animEvent.start=(function(){
var animStartEventNames = {
WebkitAnimation : 'webkitAnimationStart',animation : 'animationstart'
}
for(var name in animStartEventNames){
if(typeof el.css(name) === "string"){
return animStartEventNames[name];
}
}
})();
return {
called:false,addTranEvent:function(elem,fn,duration){
var self = this;
var fncallback = function(){
if(!self.called){
fn();
self.called = true;
}
};
function hand(){
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,fn){
elem.unbind(animEvent[name],setStyleAttribute:function(elem,val){
if(Object.prototype.toString.call(val) === "[object Object]"){
for(var name in val){
if(/^transition|animation|transform/.test(name)){
var styleName=name.charAt(0).toUpperCase() + name.substr(1);
elem.css(vendorPrefix+styleName,val[name]);
}else{
elem.css(name,val[name]);
}
}
}
}
};
})(),</pre>