Örnek
Bir ile bir şeyler yapın <div> CSS animasyon sona erdiğinde elemanı:
var x = document.getElementById("myDIV");
// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationEnd", myEndFunction);
//
Standard syntax
x.addEventListener("animationend", myEndFunction); Kendin dene " Tanımı ve Kullanımı
Bir CSS Animasyon tamamlandığında animationend olayı oluşur.
CSS Animasyonlar hakkında daha fazla bilgi için, bizim öğretici bakınız CSS3 Animasyonlar .
Bir CSS animasyon oynatıldığında, oluşabilir üç olay vardır:
- animationstart - CSS animasyon başladığında oluşur
- animationiteration - CSS animasyon tekrarlanır oluşur
- animationend - CSS animasyon tamamlandığında gerçekleşir
Tarayıcı Desteği
Tablodaki rakamlar tamamen olayı destekleyen ilk tarayıcı sürümü belirtin.
Ardından Numaraları "webkit" veya "moz" bir önek ile çalıştığım ilk versiyonunu belirtin.
| Olay | |||||
|---|---|---|---|---|---|
| animationend | 4,0 webkit | 10.0 | 16.0 5.0 moz | 4,0 webkit | 15.0 webkit 12.1 |
Not: Chrome, Safari ve Opera için webkitAnimationEnd öneki kullanın.
Sözdizimi
object.addEventListener("webkitAnimationEnd", myScript );
// Code for Chrome, Safari and Opera
object .addEventListener("animationend", myScript );
// Standard syntax
Not: addEventListener() metodu Internet Explorer 8 ve önceki sürümlerinde desteklenmez.
Teknik detaylar
| Kabarcıklar: | Evet |
|---|---|
| iptal Edilebilir: | Yok hayır |
| Etkinlik tipi: | AnimationEvent |
| DOM Versiyon: | Düzey 3 Olaylar |
İlgili Sayfalar
CSS Eğitimi: CSS3 Animasyonlar
CSS Referans: CSS3 animation Property
HTML DOM referansı: Style animation Property
<Olay Nesne