• transitionEnd和animationEnd的一个临时解决方案


    transtionEnd需要添加前缀,并且存在多次触发问题,animationEnd也需要添加前缀,下面是一个临时性解决方案,解决了部分问题,完美方案探索中

    (function(){
        var body=document.body || document.documentElement,
            style=body.style;
    
        var vendorPrefix=(function(){
            var i=0, vendor=["Moz", "Webkit", "Khtml", "O", "ms"];
            transition=transition.charAt(0).toUpperCase() + transition.substr(1);   
            while (i < vendor.length) {
                if (typeof style[vendor[i] + transition] === "string") {
                    return vendor[i];
                }
                i++;
            }
            return false;
        })();
    
        var    transitionEnd=(function(){
            var transEndEventNames = {
                WebkitTransition : 'webkitTransitionEnd',
                MozTransition    : 'transitionend',
                OTransition      : 'oTransitionEnd otransitionend',
                transition       : 'transitionend'
            }
            for(var name in transEndEventNames){
                if(typeof style[name] === "string"){
                    return transEndEventNames[name]
                }
            }
        })();
    
        var animationEnd=(function(){
            if(vendorPrefix=="Webkit"){
                return "webkitAnimationEnd";
            }else{
                return "animationend";
            }
        }());
    
        //解决多次触发问题,transitionEnd在多个属性变化时候会触发多次,子元素也会冒泡,造成父元素事件触发    
        //解决不触发问题,duration后检查是否触发,未触发则强制触发
        function addTransitionEndOnce(ele,fn,duration){    
            var called = false;
            var callback = function(){
                if (!called){
                    fn();
                    called = true;
                }
            };
            var callbackEnd = function(){
                callback();
                setTimeout(callback, duration);
                ele.removeEventListener(transitionEnd, callbackEnd);
            }
            ele.addEventListener(transitionEnd, callbackEnd);
        }
    
        window.vendorPrefix = vendorPrefix;
        window.transitionEnd = transitionEnd;
        //animationEnd只加前缀,自行注册事件即可,不存在多次问题
        window.animationEnd = animationEnd;
        window.addTransitionEnd = addTransitionEnd;
    });
  • 相关阅读:
    C语言第二次实验报告
    C语言第一次实验报告
    java远程开关机
    html5 总结
    css media 媒体查询
    移动端适配rem
    判断Android系统和iPhone系统 QQ游览器 微信
    原生javascript 选项卡封装
    浅谈坐标系以及之间的转换
    百度地图开发的学习(二)——地图定位
  • 原文地址:https://www.cnblogs.com/mengff/p/9267416.html
Copyright © 2020-2023  润新知