js处理css3 transitionend和animationend动画事件

2015-09-28 散崖 18975人已阅读

      之前的文章中已经测试了transform、transitionend、animationend在移动和pc端浏览器的前缀的兼容问题(强烈建议先阅读transform 兼容 transitionend(多次执行) animationend 事件兼容问题(针对pc和移动浏览器的前缀问题),如果知道了兼容问题,下面的代码就可以很好理解,现在整理了一下,写成一个简单的原声 js函数,这个函数方法有:

      1、addTranEvent(elem,fn,duration):用于绑定transtionend事件,处理掉多次执行的问题

      2、addAnimEvent(elem,fn),removeAnimEvent(elem,fn):分别用于绑定和解绑animationend事件

      3、setStyleAttribute(elem,val):用于设置css3的属性

      通过将之前的文章的代码整理一下,代码不多也很好理解,具体如下:

(function (root, factory) {
        if (typeof define === 'function') {
            define(factory);
        }else if (typeof exports === 'object') {
            module.exports = factory;
        } else {
            root.WN = factory();
        }
})(this,function(){
        var WN = {},
            body=document.body || document.documentElement,
            style=body.style, 
            transition="transition",
            transitionEnd,
            animationEnd,
            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 style[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 style[name] === "string"){
                    return transEndEventNames[name]
                }
            }
        })();
 
        animationEnd=(function(){
            var animEndEventNames = {
              WebkitAnimation : 'webkitAnimationEnd',
              animation      : 'animationend'
            }
            for(var name in animEndEventNames){
                if(typeof style[name] === "string"){
                    return animEndEventNames[name]
                }
            }
        })();
        WN.addTranEvent=function(elem,fn,duration){
            var called=false;
            var fncallback = function(){
                    if(!called){
                        fn();
                        called=true;
                    }
            };
            function hand(){    
                elem.addEventListener(transitionEnd, function () {
                    elem.removeEventListener(transitionEnd, arguments.callee, false);
                        fncallback();
                }, false);
            }
            setTimeout(hand,duration);
        };
        WN.addAnimEvent=function(elem,fn){
            elem.addEventListener(animationEnd,fn,false)
        };
 
        WN.removeAnimEvent=function(elem,fn){
            elem.removeEventListener(animationEnd,fn,false)
        };
 
        WN.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.style[vendorPrefix+styleName]=val[name];
                    }else{
                        elem.style[name]=val[name];
                    }
                }
            }
        };
        WN.transitionEnd=transitionEnd;
        WN.vendorPrefix=vendorPrefix;
        WN.animationEnd=animationEnd;
        return WN;
    });

      代码就是上面那些,就是根据浏览器的前缀来获取属性,然后去设置我们想要的结果,下面用三个demo分别来演示一下:

 

      1、transitionend事件


 

      2、animationend事件


 

      3、设置transfrom,transitionDuration的css3属性让元素运动起来


  

交换友情链接