Bolehkah Animasi CSS3 Mencetuskan Panggilan Balik?

Bolehkah Animasi CSS3 Mencetuskan Panggilan Balik?

Tidak seperti animasi JavaScript yang sedia menyokong panggilan balik, animasi CSS3 pada mulanya tidak mempunyai fungsi ini. Walau bagaimanapun, melalui penggunaan pendengar acara, kini boleh melaksanakan panggilan balik untuk animasi CSS3.

Pelaksanaan Panggilan Balik Berasaskan Acara

Kunci untuk mencapai panggilan balik dalam CSS3 adalah untuk mengiktiraf animasi sebagai acara yang boleh didengari. Dengan menambahkan pendengar acara pada elemen DOM yang berkaitan, anda boleh melaksanakan panggilan balik apabila animasi selesai.

Pengikatan Acara jQuery

Menggunakan jQuery, anda boleh mengikat pendengar acara kepada elemen animasi seperti berikut:

$("#sun").bind('oanimationend animationend webkitAnimationEnd', function() { 
   alert("fin") 
});

Ini mengikat pendengar acara kepada tiga kemungkinan acara jenis: oanimationend, animationend, dan webkitAnimationEnd. Acara awal diberi awalan vendor untuk memastikan keserasian dengan pelbagai penyemak imbas.

Pengikatan Acara JavaScript Tulen

Jika anda memilih untuk tidak menggunakan jQuery, anda boleh menggunakan JavaScript tulen untuk tambahkan pendengar acara:

element.addEventListener("webkitAnimationEnd", callfunction,false);
element.addEventListener("animationend", callfunction,false);
element.addEventListener("oanimationend", callfunction,false);

Pendekatan ini mencapai hasil yang sama tetapi dengan JavaScript asli kod.

Keserasian Demo dan Penyemak Imbas

Pertunjukan langsung pelaksanaan panggilan balik ini tersedia di http://jsfiddle.net/W3y7h/. Harap maklum bahawa walaupun kebanyakan penyemak imbas moden menyokong jenis acara ini, anda dinasihatkan untuk menyemak keserasian merentas penyemak imbas semasa melaksanakan panggilan balik.

Atas ialah kandungan terperinci Bolehkah Animasi CSS3 Mencetuskan Panggilan Balik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!