Contoh
Lakukan sesuatu dengan <div> elemen ketika animasi CSS telah berakhir:
var x = document.getElementById("myDIV");
// Code for Chrome, Safari and Opera
x.addEventListener("webkitAnimationEnd", myEndFunction);
//
Standard syntax
x.addEventListener("animationend", myEndFunction); Cobalah sendiri " Definisi dan Penggunaan
Acara animationend terjadi ketika animasi CSS telah selesai.
Untuk informasi lebih lanjut tentang CSS Animasi, lihat tutorial kami pada CSS3 Animasi .
Ketika animasi CSS memainkan, ada tiga peristiwa yang dapat terjadi:
- animationstart - terjadi ketika CSS animasi telah dimulai
- animationiteration - terjadi ketika CSS animasi diulang
- animationend - terjadi ketika animasi CSS telah menyelesaikan
Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang mendukung penuh acara tersebut.
Nomor diikuti oleh "webkit" atau "moz" tentukan versi pertama yang bekerja dengan awalan.
| Peristiwa | |||||
|---|---|---|---|---|---|
| animationend | 4.0 webkit | 10,0 | 16.0 5.0 moz | 4.0 webkit | 15,0 webkit 12.1 |
Catatan: Untuk Chrome, Safari dan Opera, menggunakan awalan webkitAnimationEnd.
Sintaksis
object.addEventListener("webkitAnimationEnd", myScript );
// Code for Chrome, Safari and Opera
object .addEventListener("animationend", myScript );
// Standard syntax
Catatan: addEventListener() metode tidak didukung di Internet Explorer 8 dan versi sebelumnya.
Rincian teknis
| Gelembung: | iya nih |
|---|---|
| dibatalkan: | Tidak |
| jenis acara: | AnimationEvent |
| DOM Versi: | Level 3 Acara |
Pages terkait
CSS Tutorial: CSS3 Animasi
CSS Referensi: CSS3 animation Property
HTML DOM referensi: Style animation Property
<Object Acara