Contoh
Lakukan sesuatu dengan <div> elemen ketika transisi CSS telah berakhir:
// Code for Safari 3.1 to 6.0
document.getElementById("myDIV").addEventListener("webkitTransitionEnd",
myFunction);
// Standard syntax
document.getElementById("myDIV").addEventListener("transitionend",
myFunction); Cobalah sendiri " Definisi dan Penggunaan
Acara transitionend terjadi ketika transisi CSS telah selesai.
Catatan: Jika transisi dihapus sebelum selesai, misalnya jika CSS transisi-properti properti dihapus, acara transitionend tidak akan api.
Untuk informasi lebih lanjut tentang CSS Transisi, lihat tutorial kami pada CSS3 Transisi .
Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang mendukung penuh acara tersebut.
Nomor diikuti oleh "webkit", "moz" atau "o" tentukan versi pertama yang bekerja dengan awalan.
| Peristiwa | |||||
|---|---|---|---|---|---|
| transitionend | 26,0 4.0 (webkitTransitionEnd) | 10,0 | 16.0 4.0 (mozTransitionEnd) | 6.1 3.1 (webkitTransitionEnd) | 12.1 10.5 (oTransitionEnd) |
Sintaksis
object.addEventListener("webkitTransitionEnd", myScript );
// Code for Safari 3.1 to 6.0
object .addEventListener("transitionend", myScript );
// Standard syntax
Catatan: addEventListener () metode tidak didukung di Internet Explorer 8 dan versi sebelumnya.
Rincian teknis
| Gelembung: | iya nih |
|---|---|
| dibatalkan: | iya nih |
| Jenis acara: | TransitionEvent |
| DOM Versi: | Level 3 Acara |
Pages terkait
CSS Tutorial: Transisi CSS3
CSS Referensi: CSS3 Properti transisi
CSS Referensi: CSS3 Properti transisi-properti
Obyek acara