CSS geçişinde geri arama

CSS geçişi tamamlandığında bir bildirim (geri arama gibi) almak mümkün müdür?

Safari'nin , geçişle doğrudan öğeye ekleyebileceğiniz bir webkitTransitionEnd geri çağrısı uyguladığını biliyorum .

Örnekleri (birden çok satıra yeniden biçimlendirilmiş):

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

Evet, tarayıcı tarafından bu tür şeyler destekleniyorsa, geçiş tamamlandığında bir olay tetiklenir. Ancak asıl olay tarayıcılar arasında farklılık gösterir:

• Webkit tarayıcıları (Chrome, Safari) webkitTransitionEnd
• Firefox kullanır transitionend
• IE9 + kullanımları msTransitionEnd
• Opera kullanır oTransitionEnd

Ancak webkitTransitionEndbunun her zaman ateşlenmediğini bilmelisiniz ! Bu beni birkaç kez yakaladı ve animasyonun öğe üzerinde hiçbir etkisi olmazsa gerçekleşecek gibi görünüyor. Bunu aşmak için, beklendiği gibi tetiklenmediğinde olay işleyicisini tetiklemek için bir zaman aşımı kullanmak mantıklıdır. Bu sorunla ilgili bir blog gönderisine buradan ulaşabilirsiniz: http://www.cuppadev.co.uk/the-trouble-with-css-transitions/ <- 500 Dahili Sunucu Hatası

Bunu aklımda tutarak, bu olayı şuna benzeyen bir kod yığınında kullanma eğilimindeyim:

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) 

Not: Geçiş olayı bitiş adını almak için şurada yanıt olarak gönderilen yöntemi kullanabilirsiniz: Tarayıcılar arasında CSS3 Geçiş işlevlerini nasıl normalleştiririm? .

Not: Bu soru şunlarla da ilgilidir: - CSS3 geçiş olayları

Aşağıdaki kodu kullanıyorum, bir tarayıcının hangi belirli son olayı kullandığını tespit etmeye çalışmaktan çok daha basit.

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

Alternatif olarak, bootstrap kullanıyorsanız, basitçe yapabilirsiniz

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

Bunun nedeni, aşağıdakileri bootstrap.js'ye dahil etmeleridir.

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

CSS3 dönüşümleri ve geçişleri için bir eklenti olan jQuery.transit eklentisi , CSS animasyonlarınızı komut dosyasından çağırabilir ve size bir geri arama verebilir.

Bu kolayca elde edilebilir transitionendOlay bkz belgelerinde burada basit bir örnek:

document.getElementById("button").addEventListener("transitionend", myEndFunction);

function myEndFunction() {
	this.innerHTML = "Transition event ended";
}

#button {transition: top 2s; position: relative; top: 0;}

<button id="button" onclick="this.style.top = '55px';">Click me to start animation</button>