transitionend-tapahtuma

DOM-tapahtumat TransitionEvent

Määritelmä ja käyttö

transitionend-tapahtuma tapahtuu CSS-muunnoksen valmistuttua.

Huomautus:Jos muunnos poistetaan ennen kuin se on valmis, esimerkiksi jos poistat CSS transition-property Ominaisuudet, jotka eivät laukea transitionend-tapahtumaa, jos ne poistetaan ennen kuin siirtymä on valmis, esimerkiksi jos poistat CSS

Lisätietoja CSS-siirtymistä varten, tutki CSS3 siirtymäopas.

Esimerkki

Kun CSS-siirtymä päättyy, tee jotain <div>-elementille:

// Safari 3.1 - 6.0:in kohderyhmä
document.getElementById("myDIV").addEventListener("webkitTransitionEnd", myFunction);
// Standardinen syntaksi
document.getElementById("myDIV").addEventListener("transitionend", myFunction);

Kokeile itse

Syntaksi

object.addEventListener("webkitTransitionEnd", myScript);  // Safari 3.1 - 6.0:in kohderyhmä
object.addEventListener("transitionend", myScript);        // Standardinen syntaksi

Huomautus:Internet Explorer 8 ja aikaisemmat versiot eivät tue addEventListener() metodi.

Tekninen yksityiskohta

Puhkeava: Tuki
Peruutettavissa: Tuki
Tapahtumatyypit: TransitionEvent
DOM versio: Taso 3 tapahtumat

Selaimen tuki

Taulukossa olevat numerot osoittavat ensimmäisen selaimen version, joka tukee tätä tapahtumaa täysin.

Numerot, jotka ovat "webkit", "moz" tai "o" kanssa, määrittelevät näiden etuliitteiden ensimmäisen version käyttöä.

Tapahtuma 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)

Liittyvät sivut

CSS Oppituntti: CSS3 siirtymä

CSS Viittausopas: CSS3 siirtymäominaisuus

CSS-reference-handbook: CSS3 transition-property-ominaisuus

DOM-tapahtumat TransitionEvent