Home  >  Article  >  Web Front-end  >  animationend of css3 will be executed multiple times

animationend of css3 will be executed multiple times

高洛峰
高洛峰Original
2016-11-16 10:26:591703browse

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

For this effect, the background image will be loaded for the first time, show it first, and then start the animation.
Finally, write opacity: 0; in the css, and then write opacity; in the animationend event.
But I found that animationend will be executed multiple times, and some of them are not executed yet.

The final solution is to reset the event:

     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] === &#39;string&#39;) {
                  return vendor[i];
                }
                i++;
            }
            return false;
        })();
  
        transitionEnd = (function () {
            var transEndEventNames = {
              WebkitTransition: &#39;webkitTransitionEnd&#39;,
              MozTransition: &#39;transitionend&#39;,
              OTransition: &#39;oTransitionEnd otransitionend&#39;,
              transition: &#39;transitionend&#39;
            };

            for(var name in transEndEventNames){
                if(typeof style[name] === &#39;string&#39;){
                    return transEndEventNames[name];
                }
            }
        })();
  
        animationEnd = (function(){
            var animEndEventNames = {
              WebkitAnimation: &#39;webkitAnimationEnd&#39;,
              animation: &#39;animationend&#39;
            };

            for(var name in animEndEventNames){
                if (typeof style[name] === &#39;string&#39;){
                    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) === &#39;[object Object]&#39;){
                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;
    }

Call method:


var timer;
var position = $(&#39;.position&#39;); // 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);


Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn