Bir css3 geçişinin başlayıp başlamadığını kontrol etmek için bir eleman tarafından tetiklenen herhangi bir olay var mı?

W3C CSS Geçiş Taslağı

Bir CSS Geçişinin tamamlanması, karşılık gelen bir DOM Etkinliği oluşturur. Geçiş yapılan her mülk için bir olay tetiklenir. Bu, bir içerik geliştiricisinin bir geçişin tamamlanmasıyla senkronize edilen eylemleri gerçekleştirmesine olanak tanır.

Webkit

Bir geçişin ne zaman tamamlandığını belirlemek için, geçişin sonunda gönderilen DOM etkinliği için bir JavaScript etkinlik dinleyicisi işlevi ayarlayın. Olay bir WebKitTransitionEvent örneğidir ve türü webkitTransitionEnd.

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

Mozilla

Geçişler tamamlandığında tetiklenen tek bir olay vardır. Firefox'ta, olay transitionendOpera'da oTransitionEndve WebKit'te öyle webkitTransitionEnd.

Opera

Kullanılabilir bir tür geçiş olayı vardır. oTransitionEndOlay geçiş tamamlandıktan sonra meydana gelir.

Internet Explorer

transitionendOlay geçiş tamamlandıktan sonra meydana gelir. Geçiş tamamlanmadan önce kaldırılırsa, olay tetiklenmez.

Yığın Taşması: CSS3 Geçiş işlevlerini tarayıcılar arasında nasıl normalleştiririm?

Güncelleme

Tüm modern tarayıcılar artık önceden düzeltilmemiş etkinliği destekliyor:

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

https://caniuse.com/#feat=css-transitions

Pete tarafından verilen yaklaşımı kullanıyordum, ancak şimdi aşağıdakileri kullanmaya başladım

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

Alternatif olarak, bootstrap kullanıyorsanız,

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

Bu bootstrap.js'de aşağıdakileri içerdikleri için

+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);

Ayrıca, her zaman bir geri çağrının gerçekleşmesini sağlamak için gerekli olabilecek bir emulateTransitionEnd işlevi içerdiğini unutmayın.

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

Bazen özelliklerin değişmediği veya bir boyanın tetiklenmediği durumlarda bu olayın tetiklenmediğini unutmayın. Her zaman bir geri arama aldığımızdan emin olmak için etkinliği manuel olarak tetikleyecek bir zaman aşımı süresi ayarlayalım.

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

Tüm modern tarayıcılar artık önceden düzeltilmemiş etkinliği destekliyor :

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

Chrome, Firefox ve Safari'nin en son sürümlerinde çalışır. IE10 + bile.

Opera 12'de düz JavaScript kullanarak bağlandığınızda, 'oTransitionEnd' çalışır:

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

ancak jQuery ile bağlanırsanız, 'otransitionend' kullanmanız gerekir

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

Modernizr veya bootstrap-transition.js kullanıyorsanız, basitçe bir değişiklik yapabilirsiniz:

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

Bazı bilgileri burada da bulabilirsiniz http://www.ianlunn.co.uk/blog/articles/opera-12-otransitionend-bugs-and-workarounds/

Sadece eğlence için, bunu yapma!

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

Sadece tek bir geçiş sonunu tespit etmek istiyorsanız, herhangi bir JS çerçevesi kullanmadan biraz kullanışlı bir yardımcı işlev vardır:

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

Kullanımı:

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

bir noktada iptal etmek isterseniz, yine de

handler.cancel();

Diğer etkinlik kullanımları için de iyi :)