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;
});
复制代码

 

posted @   全玉  阅读(287)  评论(0编辑  收藏  举报
编辑推荐:
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
历史上的今天:
2017-07-05 css3动画总结
点击右上角即可分享
微信分享提示