Bagaimanakah Saya Boleh Mencetuskan Panggilan Balik pada Penyiapan Animasi CSS3?

Panggil balik untuk Animasi CSS3

Animasi CSS3 menawarkan kesan animasi yang mengagumkan, tetapi tidak mempunyai fleksibiliti untuk melaksanakan panggilan balik setelah selesai. Artikel ini meneroka penyelesaian untuk perkara ini dengan memanfaatkan pendengar acara.

Masalah:

Bagaimanakah kita boleh mencetuskan fungsi panggil balik apabila animasi CSS3 selesai? Walaupun animasi JavaScript menyokong panggilan balik, animasi CSS3 nampaknya tidak mempunyai keupayaan yang sama.

Penyelesaian:

Walaupun animasi CSS3 tidak menyediakan mekanisme panggil balik secara langsung, ia mengeluarkan peristiwa yang boleh ditangkap menggunakan pendengar acara. Ini membolehkan kami melaksanakan panggilan balik apabila peristiwa ini berlaku. Berikut ialah dua kaedah:

1. Menggunakan jQuery:

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

2. Menggunakan JavaScript Tulen:

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

Pendengar acara ini mengesan penyiapan animasi dan mencetuskan fungsi panggil balik yang ditentukan. Ini memastikan bahawa panggilan balik dilaksanakan dengan pasti selepas animasi siap.

Demo Langsung:

Untuk demonstrasi praktikal, rujuk biola langsung di http://jsfiddle. net/W3y7h/ untuk menyaksikan kefungsian panggil balik dalam tindakan.

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