如何用JavaScript探测CSS动画是否已经完成

不啰嗦上代码：

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