css3的animationend会执行多次

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了css3的animationend会执行多次，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3292字，纯文字阅读大概需要5分钟。

内容图文

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

内容总结

以上是互联网集市为您收集整理的css3的animationend会执行多次全部内容，希望文章能够帮你解决css3的animationend会执行多次所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---