Adakah Peralihan CSS3 Menyediakan Acara untuk Mengesan Titik Mula dan Tamat?

Memahami Peristiwa Peralihan CSS3

Peralihan CSS3 membolehkan animasi lancar dan kesan visual pada elemen web. Untuk meningkatkan pengalaman pengguna dan menyegerakkan tindakan dengan peralihan ini, adalah penting untuk memantau kemajuan mereka. Artikel ini menjawab persoalan sama ada CSS3 menyediakan acara untuk menyemak apabila peralihan bermula atau berakhir.

Draf Peralihan CSS W3C

Draf Peralihan CSS W3C menetapkan bahawa Peralihan CSS mencetuskan peristiwa DOM yang sepadan. Untuk setiap sifat peralihan, peristiwa dijana. Ini membolehkan pembangun melaksanakan tindakan yang bertepatan dengan penyiapan peralihan.

WebKit

Di bawah WebKit, acara webkitTransitionEnd dicetuskan sebaik sahaja peralihan selesai. Menetapkan pendengar acara JavaScript untuk acara ini membolehkan pembangun menangkap penyiapannya.

box.addEventListener('webkitTransitionEnd', function(event) {
  alert("Finished transition!");
}, false);

Mozilla, Opera dan Internet Explorer

Kebanyakan penyemak imbas menyokong satu acara untuk penyelesaian peralihan:

• Firefox: transitionend
• Opera: oTransitionEnd
• WebKit: webkitTransitionEnd
• Internet Explorer: transitionend

Dalam Internet Explorer, peristiwa peralihan hanya menyala apabila peralihan selesai dengan jayanya; mengalih keluarnya lebih awal menghalang acara daripada dicetuskan.

Bringing It Together

Dengan memanfaatkan acara yang sesuai berdasarkan penyemak imbas dan menggunakan pendengar acara JavaScript, pembangun boleh memantau kemajuan peralihan CSS3 dan lakukan tindakan yang perlu selari dengan penyiapannya.

Atas ialah kandungan terperinci Adakah Peralihan CSS3 Menyediakan Acara untuk Mengesan Titik Mula dan Tamat?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!