Ist es möglich, eine Benachrichtigung (wie einen Rückruf) zu erhalten, wenn ein CSS-Übergang abgeschlossen ist?
javascript
css
css-transitions
Pompair
quelle
quelle
Antworten:
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):
quelle
this
Element im Rückruf zu tun . Aber es ist ein erforderlicher Parameter, also erfüllt es in diesem Fall nur die Anforderung.useCaptureMode
. Wenn ein Ereignis eintritt, gibt es zwei Phasen - die erste Phase ist der Erfassungsmodus, die zweite ist der Blasenmodus. Im Erfassungsmodus steigt das Ereignis vom Körperelement zum angegebenen Element ab. Es wechselt dann in den Blasenmodus, wo es das Gegenteil tut. Dieser letzte falsche Parameter gibt an, dass der Ereignis-Listener im Bubble-Modus auftreten soll. Eine Möglichkeit besteht darin, Ereignishandler anzuhängen, bevor sie im Blasenmodus benötigt werden. =) 37signals.com/svn/posts/…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:
webkitTransitionEnd
transitionend
msTransitionEnd
oTransitionEnd
Sie sollten sich jedoch bewusst sein, dass
webkitTransitionEnd
nicht 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 ErrorIn diesem Sinne tendiere ich dazu, dieses Ereignis in einem Codeabschnitt zu verwenden, der ein bisschen so aussieht:
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
quelle
transitionEndedHandler
intransitionEnded
(oder ÄnderungtransitionEnded
vontransitionEndedHandler
inaddEventListener
undremoveEventListener
und Call -transitionEnded
intransitionEndedHandler
)transitionEnded
als ich es meintetransitionEndedHandler
.Ich verwende den folgenden Code, ist viel einfacher als zu versuchen zu erkennen, welches spezifische Endereignis ein Browser verwendet.
Wenn Sie Bootstrap verwenden, können Sie dies auch einfach tun
Dies liegt daran, dass sie Folgendes in bootstrap.js enthalten
quelle
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.
quelle
Dies kann leicht mit der
transitionend
Veranstaltung erreicht werden, siehe Dokumentation hier. Ein einfaches Beispiel:quelle