• 如何用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

  • 相关阅读:
    终于回来了&&邮递员送信
    发射站
    黑匣子
    利维坦——(1)
    预告
    整除(水题)
    BZOJ054_移动玩具_KEY
    BZOJ4034_树上操作_KEY
    树链剖分学习&BZOJ1036
    BZOJ1208_宠物收养所_KEY
  • 原文地址:https://www.cnblogs.com/gongshunkai/p/5818526.html
Copyright © 2020-2023  润新知