不啰嗦上代码:
WN:(function(){
var el = $('<fakeelement>'),
transition="transition",
transitionEnd,
animEvent={'start':null,'iteration':null,'end':null},
vendorPrefix; 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,name,fn){
elem.unbind(animEvent[name],fn);
},
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]);
}
}
}
}
};
})(),
怎么调用不用我说了吧,看返回的4个方法:
addTranEvent,addAnimEvent,removeAnimEvent,setStyleAttribute