6 回答

• 16

  只是为了好玩，不要这样做！

  $.fn.transitiondone = function () {
    return this.each(function () {
      var $this = $(this);
      setTimeout(function () {
        $this.trigger('transitiondone');
      }, (parseFloat($this.css('transitionDelay')) + parseFloat($this.css('transitionDuration'))) * 1000);
    });
  };
  
  
  $('div').on('mousedown', function (e) {
    $(this).addClass('bounce').transitiondone();
  });
  
  $('div').on('transitiondone', function () {
    $(this).removeClass('bounce');
  });
  

  回复于 2024-05-02T06:20:39+08:00
• 53

  在Opera 12中使用普通JavaScript进行绑定时，'oTransitionEnd'将起作用：

  document.addEventListener("oTransitionEnd", function(){
      alert("Transition Ended");
  });
  

  但是如果你通过jQuery绑定，你需要使用'otransitionend'

  $(document).bind("otransitionend", function(){
      alert("Transition Ended");
  });
  

  如果您使用的是Modernizr或bootstrap-transition.js，您只需进行更改：

  var transEndEventNames = {
      'WebkitTransition' : 'webkitTransitionEnd',
      'MozTransition'    : 'transitionend',
      'OTransition'      : 'oTransitionEnd otransitionend',
      'msTransition'     : 'MSTransitionEnd',
      'transition'       : 'transitionend'
  },
  transEndEventName = transEndEventNames[ Modernizr.prefixed('transition') ];
  

  你也可以在这里找到一些信息http://www.ianlunn.co.uk/blog/articles/opera-12-otransitionend-bugs-and-workarounds/

  回复于 2024-05-02T06:20:39+08:00
• 210

  W3C CSS Transitions Draft

  完成CSS Transition会生成相应的DOM事件 . 每个经历过渡的属性都会触发一个事件 . 这允许内容开发者执行与转换完成同步的动作 .

  ---

  Webkit

  您可以为转换结束时发送的DOM事件设置处理程序 . 该事件是WebKitTransitionEvent的一个实例，其类型是JavaScript中的webKitTransitionEnd .

  box.addEventListener( 'webkitTransitionEnd', 
      function( event ) { alert( "Finished transition!" ); }, false );
  

  Mozilla

  转换完成时会触发一个事件 . 在Firefox中，事件是transitionend，在Opera，oTransitionEnd和WebKit中是webkitTransitionEnd .

  歌剧

  有一种类型的过渡事件可用 . oTransitionEnd事件在转换完成时发生 .

  Internet Explorer

  transitionend事件发生在转换完成时 . 如果在完成之前移除了转换，则不会触发该事件 .

  ---

  SO: How do I normalize CSS3 Transition functions across browsers?

  回复于 2024-05-02T06:20:39+08:00
• 6

  我正在使用Pete给出的方法，但我现在开始使用以下方法

  $(".myClass").one('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', 
  function() {
   //do something
  });
  

  ---

  或者，如果您使用bootstrap，那么您可以这样做

  $(".myClass").one($.support.transition.end,
  function() {
   //do something
  });
  

  这是因为它们在bootstrap.js中包含以下内容

  +function ($) {
    'use strict';
  
    // CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/)
    // ============================================================
  
    function transitionEnd() {
      var el = document.createElement('bootstrap')
  
      var transEndEventNames = {
        'WebkitTransition' : 'webkitTransitionEnd',
        'MozTransition'    : 'transitionend',
        'OTransition'      : 'oTransitionEnd otransitionend',
        'transition'       : 'transitionend'
      }
  
      for (var name in transEndEventNames) {
        if (el.style[name] !== undefined) {
          return { end: transEndEventNames[name] }
        }
      }
  
      return false // explicit for ie8 (  ._.)
    }
  
  
    $(function () {
      $.support.transition = transitionEnd()
    })
  
  }(jQuery);
  

  请注意，它们还包括一个emulateTransitionEnd函数，可能需要该函数来确保始终发生回调 .

  // http://blog.alexmaccaw.com/css-transitions
    $.fn.emulateTransitionEnd = function (duration) {
      var called = false, $el = this
      $(this).one($.support.transition.end, function () { called = true })
      var callback = function () { if (!called) $($el).trigger($.support.transition.end) }
      setTimeout(callback, duration)
      return this
    }
  

  请注意，有时此事件不会触发，通常是在属性未更改或未触发绘制的情况下 . 为了确保我们始终获得回调，让我们设置一个超时，即手动触发事件 .

  http://blog.alexmaccaw.com/css-transitions

  回复于 2024-05-02T06:20:39+08:00
• 70

  所有现代浏览器now support无前缀的事件：

  element.addEventListener('transitionend', callback, false);

  适用于最新版本的Chrome，Firefox和Safari . 甚至是IE10 .

  回复于 2024-05-02T06:20:39+08:00
• 3

  如果你只想检测一个转换端，不使用任何JS框架，这里有一个方便的实用功能：

  function once = function(object,event,callback){
      var handle={};
  
      var eventNames=event.split(" ");
  
      var cbWrapper=function(){
          eventNames.forEach(function(e){
              object.removeEventListener(e,cbWrapper, false );
          });
          callback.apply(this,arguments);
      };
  
      eventNames.forEach(function(e){
          object.addEventListener(e,cbWrapper,false);
      });
  
      handle.cancel=function(){
          eventNames.forEach(function(e){
              object.removeEventListener(e,cbWrapper, false );
          });
      };
  
      return handle;
  };
  

  用法：

  var handler = once(document.querySelector('#myElement'), 'transitionend', function(){
     //do something
  });
  

  然后，如果你想在某个时候取消，你仍然可以使用

  handler.cancel();
  

  它对其他事件的使用也很好:)

  回复于 2024-05-02T06:20:39+08:00