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

animationend of css3 will be executed multiple times

高洛峰
Release: 2016-11-16 10:26:59
Original
1720 people have browsed it

-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; }}
Copy after login
 .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;
    
}
Copy after login

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;
    }
Copy after login

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);
Copy after login


Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template