Rückruf beim CSS-Übergang

Ist es möglich, eine Benachrichtigung (wie einen Rückruf) zu erhalten, wenn ein CSS-Übergang abgeschlossen ist?

Ich weiß, dass Safari einen webkitTransitionEnd- Rückruf implementiert , den Sie mit dem Übergang direkt an das Element anhängen können.

Ihr Beispiel (in mehrere Zeilen umformatiert):

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

Ja, wenn solche Dinge vom Browser unterstützt werden, wird ein Ereignis ausgelöst, wenn der Übergang abgeschlossen ist. Das tatsächliche Ereignis unterscheidet sich jedoch zwischen den Browsern:

• Webkit-Browser (Chrome, Safari) verwenden webkitTransitionEnd
• Firefox verwendet transitionend
• IE9 + verwendet msTransitionEnd
• Opera verwendet oTransitionEnd

Sie sollten sich jedoch bewusst sein, dass webkitTransitionEndnicht immer feuert! Dies hat mich mehrmals erwischt und scheint aufzutreten, wenn die Animation keine Auswirkung auf das Element hätte. Um dies zu umgehen, ist es sinnvoll, eine Zeitüberschreitung zu verwenden, um den Ereignishandler auszulösen, falls er nicht wie erwartet ausgelöst wurde. Ein Blog-Beitrag zu diesem Problem ist hier verfügbar: http://www.cuppadev.co.uk/the-trouble-with-css-transitions/ <- 500 Internal Server Error

In diesem Sinne tendiere ich dazu, dieses Ereignis in einem Codeabschnitt zu verwenden, der ein bisschen so aussieht:

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) 

Hinweis: Um den Endnamen des Übergangsereignisses zu erhalten, können Sie die Methode verwenden, die als Antwort in: Wie normalisiere ich CSS3-Übergangsfunktionen über Browser hinweg? .

Hinweis: Diese Frage bezieht sich auch auf: - CSS3-Übergangsereignisse

Ich verwende den folgenden Code, ist viel einfacher als zu versuchen zu erkennen, welches spezifische Endereignis ein Browser verwendet.

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

Wenn Sie Bootstrap verwenden, können Sie dies auch einfach tun

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

Dies liegt daran, dass sie Folgendes in bootstrap.js enthalten

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

Das jQuery.transit-Plugin , ein Plugin für CSS3-Transformationen und -Übergänge, kann Ihre CSS-Animationen über ein Skript aufrufen und Ihnen einen Rückruf geben.

Dies kann leicht mit der transitionendVeranstaltung erreicht werden, siehe Dokumentation hier. Ein einfaches Beispiel:

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>