zoukankan      html  css  js  c++  java
  • 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;
    });
  • 相关阅读:
    fiddler 抓取 安卓模拟器 https包
    heidiSQL使用简介
    weblogic重启脚本
    svn命令在linux下的使用
    LVS之NAT和DR服务脚本
    LVS之NAT模型、DR模型配置和持久连接
    apache ab压力测试报错apr_socket_recv
    LVS负载均衡模型及算法概述
    Orcale11g单机安装与卸载
    IPC相关的命令
  • 原文地址:https://www.cnblogs.com/mengff/p/9267416.html
Copyright © 2011-2022 走看看