Bagaimanakah Saya Boleh Melaksanakan Fungsi Panggilan Balik Selepas Animasi CSS3 Selesai?

Panggil Balik Penyelesaian Animasi CSS3

Dalam bidang pembangunan web, animasi memainkan peranan penting dalam meningkatkan pengalaman pengguna. Animasi CSS3, khususnya, menawarkan cara yang berkuasa dan fleksibel untuk mencipta kesan visual dinamik. Walau bagaimanapun, satu soalan biasa yang timbul ialah: bolehkah kita melaksanakan fungsi panggil balik apabila animasi CSS3 selesai?

Jawapannya

Ya, memang mungkin untuk melaksanakan fungsi panggil balik untuk animasi CSS3. Panggilan balik ini bertindak sebagai acara yang boleh anda tangkap dengan menambahkan pendengar acara. Begini cara anda boleh mencapainya:

Menggunakan jQuery:

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

Menggunakan JavaScript Tulen:

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

Dengan menambahkan pendengar acara pada acara animasi tertentu (penghujung animasi), anda boleh melaksanakan fungsi panggil balik yang akan dicetuskan apabila animasi selesai.

Pertimbangan:

Adalah penting untuk ambil perhatian bahawa penyemak imbas yang berbeza mungkin menggunakan awalan khusus vendor untuk acara animasi. Untuk memastikan keserasian merentas penyemak imbas, adalah disyorkan untuk memasukkan ketiga-tiga awalan.

Contoh Demo:

Demonstrasi langsung fungsi panggil balik dalam tindakan boleh didapati di: http ://jsfiddle.net/W3y7h/

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Melaksanakan Fungsi Panggilan Balik Selepas Animasi CSS3 Selesai?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!