animasie en gebeurtenis
Voorbeeld
Doen iets met 'n <div>-element wanneer 'n CSS-animasie geëindig het:
var x = document.getElementById("myDIV");
// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationEnd", myEndFunction);
// Standard syntax
x.addEventListener("animationend", myEndFunction);
Definisie en gebruik
Die animasie-einde-gebeurtenis vind plaas wanneer 'n CSS-animasie voltooi is.
Vir meer inligting oor CSS-animasies, sien ons tutoriaal oor CSS3-animasies .
Wanneer 'n CSS-animasie speel, is daar drie gebeurtenisse wat kan plaasvind:
- animationstart - vind plaas wanneer die CSS-animasie begin het
- animasieiterasie - vind plaas wanneer die CSS-animasie herhaal word
- animationend - vind plaas wanneer die CSS-animasie voltooi is
Blaaierondersteuning
Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die geleentheid ten volle ondersteun.
Nommers gevolg deur "webkit" of "moz" spesifiseer die eerste weergawe wat met 'n voorvoegsel gewerk het.
Event | |||||
---|---|---|---|---|---|
animationend | 4.0 webkit | 10.0 | 16.0 5.0 moz |
4.0 webkit | 15.0 webkit 12.1 |
Let wel: Vir Chrome, Safari en Opera, gebruik die webkitAnimationEnd-voorvoegsel.
Sintaksis
object.addEventListener("webkitAnimationEnd", myScript); // Code for Chrome, Safari and Opera
object.addEventListener("animationend", myScript); // Standard syntax
Let wel: Die addEventListener() metode word nie in Internet Explorer 8 en vroeër weergawes ondersteun nie.
Tegniese besonderhede
borrels: | Ja |
---|---|
Kanselleerbaar: | Geen |
Soort gebeurtenis: | AnimasieGebeurtenis |
DOM weergawe: | Vlak 3-geleenthede |
Verwante bladsye
CSS-tutoriaal: CSS3-animasies
CSS Verwysing: CSS3 animasie Eiendom
HTML DOM verwysing: Styl animasie Eiendom