首页 > 代码库 > CSS3中动画结束,动画开始事件

CSS3中动画结束,动画开始事件

<script type="text/javascript">var UI = $.AMUI || {};        var $win = $(window);        var doc = window.document;UI.support = {};    //根据不同浏览器注入不同事件        UI.support.transition = (function() {          var transitionEnd = (function() {            // https://developer.mozilla.org/en-US/docs/Web/Events/transitionend#Browser_compatibility            var element = doc.body || doc.documentElement;            var transEndEventNames = {              WebkitTransition: ‘webkitTransitionEnd‘,              MozTransition: ‘transitionend‘,              OTransition: ‘oTransitionEnd otransitionend‘,              transition: ‘transitionend‘            };            for (var name in transEndEventNames) {              if (element.style[name] !== undefined) {                return transEndEventNames[name];              }            }          })();          return transitionEnd && {            end: transitionEnd          };        })();        UI.support.animation = (function() {          var animationEnd = (function() {            var element = doc.body || doc.documentElement;            var animEndEventNames = {              WebkitAnimation: ‘webkitAnimationEnd‘,              MozAnimation: ‘animationend‘,              OAnimation: ‘oAnimationEnd oanimationend‘,              animation: ‘animationend‘            };            for (var name in animEndEventNames) {              if (element.style[name] !== undefined) {                return animEndEventNames[name];              }            }          })();          return animationEnd && {            end: animationEnd          };        })();          $.fn.emulateTransitionEnd = function(duration) {          var called = false;          var $el = this;          $(this).one(UI.support.transition.end, function() {            called = true;          });          var callback = function() {            if (!called) {              $($el).trigger(UI.support.transition.end);            }            $el.transitionEndTimmer = undefined;          };          this.transitionEndTimmer = setTimeout(callback, duration);          return this;        };
//过度结束执行的回调 $.fn.transitionEnd
= function(callback) { var endEvent = UI.support.transition.end; var dom = this; function fireCallBack(e) { callback.call(this, e); endEvent && dom.off(endEvent, fireCallBack); } if (callback && endEvent) { dom.on(endEvent, fireCallBack); } return this; };</script>

 

CSS3中动画结束,动画开始事件