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

Posted 2020-11-21 等风来

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;
});