Acara transisi
Contoh
Lakukan sesuatu dengan elemen <div> saat 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);
Definisi dan Penggunaan
Peristiwa transisi akhir terjadi ketika transisi CSS telah selesai.
Catatan: Jika transisi dihapus sebelum selesai, misalnya jika properti properti transisi CSS dihapus, peristiwa transisi akhir tidak akan diaktifkan.
Untuk informasi lebih lanjut tentang Transisi CSS, lihat tutorial kami tentang Transisi CSS3 .
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung acara tersebut.
Angka yang diikuti oleh "webkit", "moz" atau "o" menentukan versi pertama yang berfungsi dengan awalan.
Event | |||||
---|---|---|---|---|---|
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: Metode addEventListener() tidak didukung di Internet Explorer 8 dan versi yang lebih lama.
Detail Teknis
Gelembung: | Ya |
---|---|
Dapat dibatalkan: | Ya |
Jenis acara: | Peristiwa Transisi |
Versi DOM: | Acara Tingkat 3 |
Halaman Terkait
Tutorial CSS: Transisi CSS3
Referensi CSS: Properti transisi CSS3
Referensi CSS: Properti properti transisi CSS3