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

Evet, eğer böyle şeyler tarayıcısı tarafından desteklenen, bir olay geçiş tamamlandığında tetiklenir. Gerçek olay ancak tarayıcılar arasında farklılık gösterir:

• Y tarayıcılar (Chrome, Safari) webkitTransitionEnd kullanın
• Firefox transitionend kullanır
• 9 msTransitionEnd kullanır
• Opera oTransitionEnd kullanır

Ancak webkitTransitionEnd her zaman yangın olmadığını bilmelisiniz! Bu kez beni yakaladı, ve eğer animasyon öğe üzerinde herhangi bir etkisi olmadığını ortaya görünmektedir. Bu etrafında almak için, bir anlamda beklendiği gibi harekete geçmiş değil bu durumda olay işleyicisi yangın için bir zaman aşımı kullanmak için yapar. Bu sorun mevcuttur hakkında bir blog yazısı: http://www.cuppadev.co.uk/the-trouble-with-css-transitions/

Bu düşünceyle, biraz da şuna benzer bir kod yığını bu olay kullanmak eğilimindedir:

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 yöntemi cevap olarak gönderildi kullanabilirsiniz adı son olsun: How do I normalize CSS3 Transition functions across browsers?.

Not: bu soru da ilişkilidir: - CSS3 transition events