Gibt es Ereignisse, die von einem Element ausgelöst werden, um zu überprüfen, ob ein CSS3-Übergang begonnen oder beendet wurde?
CSS3-Übergangsereignisse
Andreas Köberle
Davor Lucic
W3C CSS-Übergangsentwurf
Der Abschluss eines CSS-Übergangs generiert ein entsprechendes DOM-Ereignis. Für jede Eigenschaft, die einem Übergang unterzogen wird, wird ein Ereignis ausgelöst. Dadurch kann ein Entwickler von Inhalten Aktionen ausführen, die mit dem Abschluss eines Übergangs synchronisiert sind.
Webkit
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 sein Typ ist
webkitTransitionEnd
.
box.addEventListener( 'webkitTransitionEnd',
function( event ) { alert( "Finished transition!" ); }, false );
Mozilla
Es gibt ein einzelnes Ereignis, das ausgelöst wird, wenn Übergänge abgeschlossen sind. In Firefox ist das Ereignis
transitionend
in der Oper,oTransitionEnd
und in WebKit ist eswebkitTransitionEnd
.
Oper
Es ist eine Art von Übergangsereignis verfügbar. Die
oTransitionEnd
Ereignis tritt bei Abschluss des Übergangs auf.
Internet Explorer
Die
transitionend
Ereignis tritt bei 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?
-
Beachten Sie, dass das Ereignis in Firefox „transitionend“ und in Opera „oTransitionEnd“ heißt
– Andreas Köberle
13. Mai 2010 um 20:25 Uhr
-
Niemand hat etwas über den Übergangsstartteil der Frage erwähnt. Gibt es keine Möglichkeit, einen Ereignishandler zu registrieren, der vor Beginn des Übergangs ausgelöst werden soll?
– Tyler
31. August 2011 um 17:07 Uhr
-
Gibt es jetzt einen Standardweg, um dies zu erreichen? 2 Jahre sind eine lange Zeit! Die Dinge haben sich wahrscheinlich geändert.
– Leichter Flaum
22. Mai 2012 um 15:52 Uhr
-
@tyler Ich weiß nicht, wie ich das Fehlen von Übergängen umgehen soll.
– Davor Lucic
22. Mai 2012 um 16:43 Uhr
-
Die mit @Mild Fuzz verknüpfte Stackoverflow-Frage hat eine interessante Lösung.
– Davor Lucic
22. Mai 2012 um 16:43 Uhr
Tom
Aktualisieren
Alle modernen Browser unterstützen jetzt das Ereignis ohne Präfix:
element.addEventListener('transitionend', callback, false);
https://caniuse.com/#feat=css-transitions
Ich habe den von Pete angegebenen Ansatz verwendet, aber ich habe jetzt begonnen, den folgenden zu verwenden
$(".myClass").one('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd',
function() {
//do something
});
Wenn Sie Bootstrap verwenden, können Sie dies alternativ 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 ( ._.)
}
$(function () {
$.support.transition = transitionEnd()
})
}(jQuery);
Beachten Sie, dass sie auch eine emulateTransitionEnd-Funktion enthalten, die möglicherweise erforderlich ist, um sicherzustellen, dass ein Rückruf immer erfolgt.
// 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
}
Beachten Sie, dass dieses Ereignis manchmal nicht ausgelöst wird, normalerweise dann, wenn sich die Eigenschaften nicht ändern oder eine Farbe nicht ausgelöst wird. Um sicherzustellen, dass wir immer einen Rückruf erhalten, legen wir ein Timeout fest, das das Ereignis manuell auslöst.
-
So etwas kann man nicht machen. In einigen Fällen wird Callback mehr als einmal ausgelöst.
– Sebastian
7. Juni 2013 um 13:57 Uhr
-
In Browsern, die sowohl die vorangestellten als auch die regulären Ereignisnamen beibehalten. Sie können dies umgehen, indem Sie .one anstelle von .on verwenden
– AlexG
26. Juli 2013 um 23:14 Uhr
-
Nur zur Info: Die erste Lösung sieht nett und praktisch aus, verursacht aber ein Speicherleck: codepen.io/jjd/pen/ZEpGGqG Um dies zu vermeiden, benennen Sie alle Ereignisnamen und deregistrieren sie explizit. Andernfalls fügen Sie jedes Mal, wenn der Code ausgeführt wird, eine Reihe von Ereignis-Listenern hinzu, die nie bereinigt werden. $(.myClass”).one(‘transitionend.namespace webkitTransitionEnd.namespace oTransitionEnd.namespace otransitionend.namespace MSTransitionEnd.namespace’, function() { $(this).off(‘.namespace’); // etwas tun } );
– Jesse
30. November 2020 um 13:53 Uhr
Nave
Alle modernen Browser jetzt unterstützen das Ereignis ohne Präfix:
element.addEventListener('transitionend', callback, false);
Funktioniert in den neuesten Versionen von Chrome, Firefox und Safari. Sogar IE10+.
Wenn Sie in Opera 12 mit dem einfachen JavaScript binden, funktioniert ‘oTransitionEnd’:
document.addEventListener("oTransitionEnd", function(){
alert("Transition Ended");
});
Wenn Sie jedoch über jQuery binden, müssen Sie „otransitionend“ verwenden.
$(document).bind("otransitionend", function(){
alert("Transition Ended");
});
Falls Sie Modernizr oder bootstrap-transition.js verwenden, können Sie einfach eine Änderung vornehmen:
var transEndEventNames = {
'WebkitTransition' : 'webkitTransitionEnd',
'MozTransition' : 'transitionend',
'OTransition' : 'oTransitionEnd otransitionend',
'msTransition' : 'MSTransitionEnd',
'transition' : 'transitionend'
},
transEndEventName = transEndEventNames[ Modernizr.prefixed('transition') ];
Auch hier finden Sie einige Informationen http://www.ianlunn.co.uk/blog/articles/opera-12-otransitionend-bugs-and-workarounds/
yckart
Nur zum Spaß, tu das nicht!
$.fn.transitiondone = function () {
return this.each(function () {
var $this = $(this);
setTimeout(function () {
$this.trigger('transitiondone');
}, (parseFloat($this.css('transitionDelay')) + parseFloat($this.css('transitionDuration'))) * 1000);
});
};
$('div').on('mousedown', function (e) {
$(this).addClass('bounce').transitiondone();
});
$('div').on('transitiondone', function () {
$(this).removeClass('bounce');
});
OpherV
Wenn Sie einfach nur ein einziges Übergangsende erkennen möchten, ohne ein JS-Framework zu verwenden, finden Sie hier eine kleine praktische Hilfsfunktion:
function once = function(object,event,callback){
var handle={};
var eventNames=event.split(" ");
var cbWrapper=function(){
eventNames.forEach(function(e){
object.removeEventListener(e,cbWrapper, false );
});
callback.apply(this,arguments);
};
eventNames.forEach(function(e){
object.addEventListener(e,cbWrapper,false);
});
handle.cancel=function(){
eventNames.forEach(function(e){
object.removeEventListener(e,cbWrapper, false );
});
};
return handle;
};
Verwendungszweck:
var handler = once(document.querySelector('#myElement'), 'transitionend', function(){
//do something
});
Wenn Sie dann irgendwann kündigen möchten, können Sie dies immer noch tun
handler.cancel();
Es ist auch gut für andere Veranstaltungszwecke 🙂