Rückruf bei CSS Übergang

Question

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

Answer 1

Ich weiß, dass Safari Geräte ein webkitTransitionEnd Rückruf, dass Sie direkt mit dem Element mit dem Übergang anhängen können.

Ihr Beispiel (neu formatiert, um mehrere Zeilen):

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

Answer 2

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

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

Allerdings sollte man sich bewusst sein, dass webkitTransitionEnd nicht immer Feuer! Das hat mich einige Male gefangen und scheint aufzutreten, wenn die Animation keine Auswirkung auf das Element haben würde. Um dies zu umgehen, macht es Sinn, ein Timeout zu verwenden, um die Event-Handler in dem Fall zu schießen, dass es nicht wie erwartet ausgelöst. Ein Blog-Beitrag zu diesem Problem finden Sie hier: http: // www. cuppadev.co.uk/the-trouble-with-css-transitions/ <- 500 Internal Server Error

In diesem Sinne, ich neige dazu, dieses Ereignis in einem Stück Code zu verwenden, die ein bisschen wie folgt 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 das Übergangsereignis Ende Namen erhalten Sie die Methode so die Antwort gepostet können in: Wie normalisieren ich CSS3 Transition Funktionen in allen Browsern? .

Hinweis: Diese Frage wird auch im Zusammenhang mit: - CSS3 Übergangsereignisse

Answer 3

Ich bin mit dem folgenden Code, ist viel einfacher, als zu versuchen, die spezifische Endereignis eines Browser verwendet zu erkennen.

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

---

Alternativ, wenn Sie verwenden Bootstrap dann können Sie einfach tun

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

Dies ist deswegen, sie umfassen die folgenden in 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);

Answer 4

Die jQuery.transit Plugin , ein Plugin für CSS3-Transformationen und Übergänge, können Sie Ihre CSS-Animationen rufen von Skript und geben Sie einen Rückruf.

Answer 5

Dies kann leicht mit der transitionend Ereignisse siehe Dokumentation erreicht werden 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>