Bagaimanakah Saya Boleh Memantau Kemajuan Peralihan CSS3 Menggunakan Acara DOM?

Peristiwa Peralihan CSS3: Memantau Kemajuan Peralihan dengan Acara DOM

Dalam CSS3, peralihan menyediakan cara yang lancar dan animasi untuk menukar sifat sesuatu elemen dari semasa ke semasa. Untuk menjejaki kemajuan peralihan, peristiwa DOM boleh digunakan untuk mengesan apabila ia telah bermula dan tamat.

W3C Standard

Draf Peralihan CSS W3C mentakrifkan DOM peristiwa yang dicetuskan apabila tamat peralihan. Acara ini khusus untuk setiap sifat yang mengalami peralihan.

WebKit (Safari, Chrome, Opera)

Untuk penyemak imbas WebKit, acara webkitTransitionEnd dicetuskan apabila peralihan selesai. Acara ini menyediakan maklumat tentang peralihan, termasuk harta yang telah dialihkan.

Mozilla (Firefox)

Dalam Mozilla, acara peralihan berfungsi sama dengan tujuan webkitTransitionEnd. Jenis acara adalah konsisten merentas Firefox, Opera dan WebKit.

Opera

Opera juga menyokong acara oTransitionEnd, yang berlaku semasa peralihan selesai.

Internet Explorer

Internet Explorer mencetuskan peristiwa peralihan tamat apabila peralihan selesai. Adalah penting untuk ambil perhatian bahawa jika peralihan dialih keluar sebelum selesai, acara itu tidak akan dipecat.

Contoh Penggunaan

Untuk memantau kemajuan peralihan CSS3 menggunakan Javascript , pendengar acara boleh dilampirkan pada acara DOM yang sesuai. Contohnya:

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

Dengan memanfaatkan peristiwa peralihan ini, pembangun boleh menyegerakkan tindakan dengan penyiapan peralihan CSS3, mewujudkan antara muka pengguna yang lebih responsif dan menarik.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memantau Kemajuan Peralihan CSS3 Menggunakan Acara DOM?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!