css3 的animationend 会执行多次
程序员文章站
2022-04-18 21:01:38
...
-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);
推荐阅读
-
JQuery给元素绑定click事件多次执行的解决方法
-
jsp的注释可能会影响页面加载速度让代码扔继续执行
-
多次废掉皇帝的梁冀为何会惧怕自己的妻子呢?
-
CSS3实现同时执行倾斜和旋转的动画效果
-
jquery mobile的触控点击事件会多次触发问题的解决方法
-
历史上真的有天地会,多次实际行动组织起义的原因是什么?
-
ThreadPoolExecutor线程池任务执行失败的时候会怎样
-
如果jsp页面中include(被包含)被包含的页面中有加载事件,那window.onload事件到底什么时候执行,会执行几次?
-
jquery的click 事件点击一次会累加执行多次的解决方法
-
任意给定一个正整数N, 如果是偶数,执行: N / 2 如果是奇数,执行: N * 3 + 1 生成的新的数字再执行同样的动作,循环往复。 通过观察发现,这个数字会一会儿上升到很高, 一会儿又降落下