transitionend-händelsen

DOM-händelser TransitionEvent

Definition och användning

transitionend-händelsen inträffar när CSS-omvandlingen är klar.

Kommentar:Om en övergång tas bort innan den är klar, till exempel om CSS transition-property Egenskap, kommer inte att trigga transitionend-händelsen.

För mer information om CSS övergångar, lär dig vår CSS3 övergång tutorial.

Exempel

När CSS övergångar är klara, gör något med <div>-elementet:

// kod för Safari 3.1 till 6.0
document.getElementById("myDIV").addEventListener("webkitTransitionEnd", myFunction);
// standard syntax
document.getElementById("myDIV").addEventListener("transitionend", myFunction);

Prova själv

Syntax

object.addEventListener("webkitTransitionEnd", myScript);  // kod för Safari 3.1 till 6.0
object.addEventListener("transitionend", myScript);        // standard syntax

Kommentar:Internet Explorer 8 eller tidigare versioner stöder inte addEventListener() metod.

Tekniska detaljer

Bubbling: Stöd
Avbrytbar: Stöd
Händelse typ: TransitionEvent
DOM version: Nivå 3 Händelser

Webbläsarstöd

Numreringarna i tabellen anger den första webbläsarversionen som helt stöder händelsen.

Numreringar efter "webkit", "moz" eller "o" specificerar den första versionen som användar dessa prefix.

Händelse Chrome IE Firefox Safari Opera
transitionend 26.0
4.0 (webkit)		 10.0 16.0
4.0 (moz)		 6.1
3.1 (webkit)		 12.1
10.5 (o)

Relaterade sidor

CSS tutorial: CSS3 övergång

CSS referenshandbok: CSS3 transition egenskap

CSS-referencehandbok: CSS3-transition-property-attribut

DOM-händelser TransitionEvent