css3 的animationend 會執行多次

-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 就是要執行動畫的DOMvar 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);

