Gibt es Ereignisse, die von einem Element ausgelöst werden, um zu überprüfen, ob ein CSS3-Übergang begonnen oder beendet wurde?
quelle
Gibt es Ereignisse, die von einem Element ausgelöst werden, um zu überprüfen, ob ein CSS3-Übergang begonnen oder beendet wurde?
Der Abschluss eines CSS-Übergangs generiert ein entsprechendes DOM-Ereignis. Für jede Eigenschaft, die einen Übergang durchläuft, wird ein Ereignis ausgelöst. Auf diese Weise kann ein Inhaltsentwickler Aktionen ausführen, die mit dem Abschluss eines Übergangs synchronisiert werden.
Um festzustellen, wann ein Übergang abgeschlossen ist, legen Sie eine JavaScript-Ereignis-Listener-Funktion für das DOM-Ereignis fest, das am Ende eines Übergangs gesendet wird. Das Ereignis ist eine Instanz von WebKitTransitionEvent und hat den Typ
webkitTransitionEnd
.
box.addEventListener( 'webkitTransitionEnd',
function( event ) { alert( "Finished transition!" ); }, false );
Es gibt ein einzelnes Ereignis, das ausgelöst wird, wenn Übergänge abgeschlossen sind. In Firefox ist das Ereignis
transitionend
, in OperaoTransitionEnd
und in WebKitwebkitTransitionEnd
.
Es ist eine Art von Übergangsereignis verfügbar. Das
oTransitionEnd
Ereignis tritt nach Abschluss des Übergangs auf.
Das
transitionend
Ereignis tritt nach Abschluss des Übergangs auf. Wenn der Übergang vor Abschluss entfernt wird, wird das Ereignis nicht ausgelöst.
Stapelüberlauf: Wie normalisiere ich CSS3-Übergangsfunktionen über Browser hinweg?
Aktualisieren
Alle modernen Browser unterstützen jetzt das nicht festgelegte Ereignis:
element.addEventListener('transitionend', callback, false);
https://caniuse.com/#feat=css-transitions
Ich habe den Ansatz von Pete verwendet, aber jetzt habe ich angefangen, Folgendes zu verwenden
Wenn Sie Bootstrap verwenden, können Sie dies auch einfach tun
Dies liegt daran, dass sie Folgendes in bootstrap.js enthalten
Beachten Sie, dass sie auch eine emulateTransitionEnd-Funktion enthalten, die möglicherweise erforderlich ist, um sicherzustellen, dass immer ein Rückruf erfolgt.
http://blog.alexmaccaw.com/css-transitions
quelle
Alle modernen Browser unterstützen jetzt das nicht festgelegte Ereignis:
element.addEventListener('transitionend', callback, false);
Funktioniert in den neuesten Versionen von Chrome, Firefox und Safari. Sogar IE10 +.
quelle
In Opera 12 funktioniert 'oTransitionEnd', wenn Sie mit einfachem JavaScript binden:
Wenn Sie jedoch über jQuery binden, müssen Sie 'otransitionend' verwenden.
Wenn Sie Modernizr oder bootstrap-Transition.js verwenden, können Sie einfach eine Änderung vornehmen:
Hier finden Sie auch einige Informationen http://www.ianlunn.co.uk/blog/articles/opera-12-otransitionend-bugs-and-workarounds/
quelle
Nur zum Spaß, tu das nicht!
quelle
Wenn Sie nur ein einziges Übergangsende erkennen möchten, ohne ein JS-Framework zu verwenden, finden Sie hier eine praktische Dienstprogrammfunktion:
Verwendung:
Wenn Sie dann irgendwann abbrechen möchten, können Sie dies trotzdem tun
Es ist auch gut für andere Event-Verwendungen :)
quelle