zoukankan      html  css  js  c++  java
  • 如何用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

  • 相关阅读:
    C# 之 HttpRequest 类
    C# 之 日常问题积累(一)
    DataGrid前台数据绑定技巧
    [转]C,C++开源项目中的100个Bugs
    10行Python代码解决约瑟夫环(模拟)
    基于ASP.NET的comet简单实现 http长连接,IAsyncResult
    架构设计分享之权限系统(看图说话)
    内核request_mem_region 和 ioremap的理解
    【调侃】IOC前世今生 工厂模式 反射 依赖倒置
    ecos内核概览--bakayi译
  • 原文地址:https://www.cnblogs.com/gongshunkai/p/5818526.html
Copyright © 2011-2022 走看看