Peristiwa transitionend

Definisi dan penggunaan

Peristiwa transitionend terjadi apabila transisi CSS selesai

Keterangan:Jika transisi dihapus sebelum tamat, contohnya jika CSS dihapus transition-property Sifat, akan tidak menyebabkan peristiwa transitionend

Untuk mendapatkan pengetahuan lanjut tentang transition CSS, belajar di Panduan Transition CSS3.

Contoh

Apabila CSS transition selesai, lakukan sesuatu untuk elemen <div>:

// Kode untuk Safari 3.1 hingga 6.0
document.getElementById("myDIV").addEventListener("webkitTransitionEnd", myFunction);
// Grama standard
document.getElementById("myDIV").addEventListener("transitionend", myFunction);

Coba sendiri

Grama

object.addEventListener("webkitTransitionEnd", myScript);  // Kode untuk Safari 3.1 hingga 6.0
object.addEventListener("transitionend", myScript);        // Grama standard

Keterangan:Internet Explorer 8 atau versi yang lebih awal tidak menyokong Metode addEventListener().

Perincian teknikal

Bubbling: Disebabkan
Boleh dibatalkan: Disebabkan
Jenis peristiwa: TransitionEvent
Versi DOM: Peristiwa Level 3

Pematuhan pereka

Nombor di dalam tabel menunjukkan versi pereka paling awal yang menyokong peristiwa ini

Nombor yang diikuti dengan "webkit", "moz" atau "o" menunjukkan versi pertama yang digunakan untuk sebelumnya

Peristiwa Chrome IE Firefox Safari Opera
transitionend 26.0
4.0 (webkit)
10.0 16.0
4.0 (moz)
6.1
3.1 (webkit)
12.1
10.5 (o)

Laman yang berkenaan

Panduan CSS: Transition CSS3

Buku Rujukan CSS: Properti transition CSS3

Panduan rujukan CSS: Sifat transition-property CSS3