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

Bolehkah Animasi CSS3 Mencetuskan Fungsi Panggilan Balik?

Tidak seperti animasi JavaScript, animasi CSS3 sememangnya tidak menyediakan mekanisme langsung untuk melaksanakan fungsi panggil balik apabila penyiapan. Walau bagaimanapun, terdapat penyelesaian yang melibatkan penggunaan pendengar acara.

Pelaksanaan Menggunakan Rangka Kerja JavaScript

Sebagai contoh, dengan jQuery, anda boleh melampirkan pendengar acara untuk menangkap penyiapan acara dan gunakan fungsi panggil balik:

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

Pelaksanaan Menggunakan Tulen JavaScript

Jika anda lebih suka menggunakan JavaScript tulen, coretan kod berikut menunjukkan cara menambah pendengar acara untuk acara akhir animasi yang berbeza:

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

Pertimbangan

Perlu diingat bahawa sokongan penyemak imbas untuk acara animasi CSS3 berbeza-beza. Nama acara yang digunakan dalam coretan kod di atas meliputi pelbagai jenis penyemak imbas, memastikan keserasian.

Demo

Untuk demonstrasi langsung, lawati JSFiddle ini: http:/ /jsfiddle.net/W3y7h/

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