transitionendEreignis
Beispiele
Ändern Sie den Stil und den Text des <div>-Elements, nachdem die CSS-Transition abgeschlossen ist:
document.getElementById("myDIV").addEventListener("webkitTransitionEnd", myFunction);
// Standardsyntax
document.getElementById("myDIV").addEventListener("transitionend", myFunction);
Selbst ausprobieren »
Definition und Verwendung
Das transitionend-Ereignis wird ausgelöst, nachdem eine CSS-Transition abgeschlossen wurde.
Hinweis:Wenn die Transition vor dem Abschluss entfernt wird, zum Beispiel wenn eine CSS-transition-property-Eigenschaft entfernt wird, wird das Transition-Ereignis nicht ausgelöst.
Weitere Informationen zu CSS-Transitions finden Sie in unserenCSS3 Transitions。
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die das Ereignis vollständig unterstützt.
Die von "webkit" oder "moz" oder "o" angegebenen Zahlen geben die erste Version an, die mit einem Präfix funktionierte.
| Ereignis | |||||
|---|---|---|---|---|---|
| transitionend | 26.0 4.0 ist webkitTransitionEnd |
10.0 | 16.0 4.0 ist mozTransitionEnd |
6.1 3.1 ist webkitTransitionEnd |
12.1 10.5 ist oTransitionEnd |
Hinweis:Safari 3.1 bis 6.0 unterstützt dieses Ereignis mit dem Präfix webkitTransitionEnd.
Syntax
object.addEventListener("transitionend", myScript); // Standardsyntax
Hinweis:Internet Explorer 8 und frühere IE-Versionen unterstützen die MethodeaddEventListener()nicht.
Technische Details
| Blubbert: | Ja |
|---|---|
| Abbrechbar: | Ja |
| Ereignistyp: | TransitionEvent |
Verwandte
CSS-Tutorial:CSS3-Übergänge
CSS-Referenz:CSS3-Übergänge
CSS-Referenz:CSS3 transition-property-Eigenschaft
Event-Objekt Weitere Erweiterungen