css3 的animationend 會執行多次

小渝人兒發表於2016-11-10
CSSS3
-webkit-keyframes banner-slide-70 { 0%{ opacity:0;-webkit-transform:translateY(70px) } 100%{ opacity:1; }}
@-moz-keyframes banner-slide-70 { 0%{ opacity:0;-moz-transform:translateY(70px) } 100%{ opacity:1; }}
@-o-keyframes banner-slide-70 { 0%{ opacity:0;-o-transform:translateY(70px) } 100%{ opacity:1; }}
@keyframes banner-slide-70 { 0%{ opacity:0;-webkit-transform:translateY(70px);-moz-transform:translateY(70px);-ms-transform:translateY(70px);transform:translateY(70px);} 100%{ opacity:1; }}


 .seven {
    background: url(../common/img/sec/banner/7.png) center bottom no-repeat;
    -webkit-animation: banner-slide-70 0.8s ease-out 0.8s 1;
             -moz-animation: banner-slide-70 0.8s ease-out 0.8s 1;
                -o-animation: banner-slide-70 0.8s ease-out 0.8s 1;
                animation: banner-slide-70 0.8s ease-out 0.8s 1;
    
}

對於這樣的效果，背景圖片會首次就載入進來，先show一下，再開始動畫。
最後在css 裡面先寫上opacity: 0; 然後再animationend事件裡面寫上opacity;
但是又發現animationend 會執行多次，而且有的還不執行。

最後的解決方法是，重置事件：

     function getWX() {
        var WN = {};
        var body = document.body || document.documentElement;
        var style = body.style;
        var transition = `transition`;
        var transitionEnd;
        var animationEnd;
        var vendorPrefix; 
          
        transition = transition.charAt(0).toUpperCase() + transition.substr(1);
  
        vendorPrefix = (function () {//現在的opera也是webkit
            var i = 0;
            var 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;
    }

呼叫方式：



var timer;
var position = $(`.position`); // position 就是要執行動畫的DOM
var hasAnimation = false;

u.each(position, function (item, key) {
    var name = $(item).get(0);
    getWX().addAnimEvent(name, function () {
        $(item).css({opacity: 1});
        hasAnimation = true;
    });
});         

timer = setTimeout(function () {
    if (!hasAnimation) {
        position.css({opacity: 1});
    }
}, 1000);

相關文章