Home >Web Front-end >CSS Tutorial >animationend of css3 will be executed multiple times
-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] === '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; }
Call method:
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);