Callback przy przejściu CSS

Tak, jeśli takie rzeczy są obsługiwane przez przeglądarkę, wtedy po zakończeniu przejścia zostanie wywołane zdarzenie. Jednak rzeczywiste Zdarzenie różni się między przeglądarkami:

• użycie przeglądarek Webkit (Chrome, Safari) webkitTransitionEnd
• Firefox używa transitionend
• IE9 + używa msTransitionEnd
• Opera używa oTransitionEnd

Należy jednak pamiętać, że webkitTransitionEnd nie zawsze strzela! To mnie złapało wiele razy, i wydaje się, że występuje, jeśli animacja nie będzie miała wpływu na żywioł. Aby to obejść, sensowne jest użycie limitu czasu do uruchomienia obsługi zdarzenia w przypadku, gdy nie zostało ono uruchomione zgodnie z oczekiwaniami. Post na blogu o tym problemie jest dostępny tutaj: http://www.cuppadev.co.uk/the-trouble-with-css-transitions/

Mając to na uwadze, zwykle używam tego zdarzenia w kawałku kodu, który wygląda trochę tak:

var transitionEndEventName = "XXX"; //figure out, e.g. "webkitTransitionEnd".. 
var elemToAnimate = ... //the thing you want to animate..
var done = false;
var transitionEnded = function(){
     done = true;
     //do your transition finished stuff..
     elemToAnimate.removeEventListener(transitionEndEventName,
                                        transitionEnded, false);
};
elemToAnimate.addEventListener(transitionEndEventName,
                                transitionEnded, false);

//animation triggering code here..

//ensure tidy up if event doesn't fire..
setTimeout(function(){
    if(!done){
        console.log("timeout needed to call transition ended..");
        transitionEnded();
    }
}, XXX); //note: XXX should be the time required for the
        //animation to complete plus a grace period (e.g. 10ms) 

Uwaga: Aby uzyskać nazwę końca zdarzenia przejścia, możesz użyć metody posted as the answer in: Jak znormalizować funkcje przejścia CSS3 w przeglądarkach?.

Uwaga: to pytanie jest również związane z: - CSS3 zdarzenia przejściowe

Używam poniższego kodu, jest znacznie prostszy niż próba wykrycia, którego konkretnego zdarzenia końcowego używa przeglądarka.

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

Alternatywnie, jeśli używasz bootstrap, możesz po prostu zrobić

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

Jest to spowodowane tym, że zawierają one następujące elementy w 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 (  ._.)
  }

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

  $(function () {
    $.support.transition = transitionEnd()
  })

}(jQuery);

JQuery.wtyczka transit , wtyczka do transformacji i przejść CSS3, może wywoływać animacje CSS ze skryptu i wywoływać oddzwanianie.