Ответ 1

W3C CSS Transitions Draft

Завершение перехода CSS генерирует соответствующее событие DOM. Событие запускается для каждого свойства, которое подвергается переходу. Это позволяет разработчику контента выполнять действия, которые синхронизируются с завершением перехода.

Webkit

Чтобы определить, когда переход завершается, установите функцию прослушивания событий JavaScript для события DOM, которое отправляется в конце перехода. Событие является экземпляром WebKitTransitionEvent, а его тип - webkitTransitionEnd.

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

Mozilla

Есть одно событие, которое запускается, когда переходы завершены. В Firefox это событие transitionend, в Opera - oTransitionEnd, а в WebKit - webkitTransitionEnd.

опера

Существует один тип события перехода. Событие oTransitionEnd наступает при завершении перехода.

Internet Explorer

Событие transitionend наступает при завершении перехода. Если переход удален до его завершения, событие не сработает.

Переполнение стека: Как нормализовать функции перехода CSS3 в разных браузерах?

Ответ 2

Я использовал подход, данный Пит, однако теперь я начал использовать следующие

$(".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

Ответ 3

Все современные браузеры теперь поддерживают беспрецедентное событие:

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

Работает в последних версиях Chrome, Firefox и Safari. Даже IE10 +.

Ответ 4

В 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/

Ответ 5

Просто для удовольствия, не делайте этого!

$.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');
});

Ответ 6

Если вы просто хотите обнаружить только один конец перехода, без использования какой-либо инфраструктуры 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();

Это хорошо для других событий, а также:)