Bagaimanakah Saya Boleh Mencetuskan Fungsi Panggilan Balik dengan Animasi CSS3?

Menggunakan Panggilan Balik untuk Animasi CSS3

Dalam bidang pembangunan web, pertanyaan timbul: bolehkah animasi CSS3 mencetuskan fungsi panggil balik? Walaupun animasi JavaScript menyediakan fungsi ini, rakan sejawat CSS3 tidak mempunyai sokongan yang wujud.

Untuk memintas pengehadan ini, animasi CSS3 boleh digabungkan dengan pendengar acara, mengeksploitasi fakta bahawa animasi pada asasnya adalah peristiwa itu sendiri. Dengan menggunakan jQuery atau JavaScript tulen, pembangun boleh melanggan acara ini dan menggunakan panggilan balik yang ditetapkan setelah mereka selesai:

jQuery:

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

JavaScript Tulen:

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

Pendengar acara ini boleh dilampirkan pada mana-mana HTML animasi unsur. Apabila animasi mencapai titik akhir, fungsi panggil balik yang ditentukan akan dilaksanakan:

Nota: Penyemak imbas yang berbeza mungkin mempamerkan awalan yang berbeza untuk nama pendengar acara. Contoh yang diberikan meliputi awalan lazim, memastikan keserasian merentas penyemak imbas utama.

Untuk demonstrasi langsung, lawati:

http://jsfiddle.net/W3y7h/

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