animasyonend Etkinliği
Örnek
Bir CSS animasyonu sona erdiğinde <div> öğesiyle bir şeyler yapın:
var x = document.getElementById("myDIV");
// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationEnd", myEndFunction);
// Standard syntax
x.addEventListener("animationend", myEndFunction);
Tanım ve Kullanım
Animasyonend olayı, bir CSS animasyonu tamamlandığında gerçekleşir.
CSS Animasyonları hakkında daha fazla bilgi için CSS3 Animasyonları hakkındaki eğitimimize bakın .
Bir CSS animasyonu oynatıldığında meydana gelebilecek üç olay vardır:
- animasyon başlangıcı - CSS animasyonu başladığında gerçekleşir
- animasyon yineleme - CSS animasyonu tekrarlandığında oluşur
- animasyonend - CSS animasyonu tamamlandığında oluşur
Tarayıcı Desteği
Tablodaki sayılar, olayı tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
"Webkit" veya "moz" tarafından takip edilen sayılar, bir önekle çalışan ilk sürümü belirtir.
Event | |||||
---|---|---|---|---|---|
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 önekini kullanın.
Sözdizimi
object.addEventListener("webkitAnimationEnd", myScript); // Code for Chrome, Safari and Opera
object.addEventListener("animationend", myScript); // Standard syntax
Not: addEventListener () yöntemi, Internet Explorer 8 ve önceki sürümlerde desteklenmez.
Teknik detaylar
kabarcıklar: | Evet |
---|---|
İptal edilebilir: | Numara |
Etkinlik tipi: | AnimasyonEtkinlik |
DOM Sürümü: | 3. Seviye Etkinlikleri |
İlgili Sayfalar
CSS Eğitimi: CSS3 Animasyonları
CSS Referansı: CSS3 animasyon Özelliği
HTML DOM referansı: Stil animasyonu Özellik