Bagaimana untuk Mengesan Penghujung Peralihan dan Animasi CSS3 dengan jQuery?

Memanfaatkan Peralihan CSS3: Mengesan Penyelesaian dengan jQuery

Apabila menganimasikan elemen menggunakan peralihan CSS3, adalah perlu untuk mengetahui saat yang tepat mereka membuat kesimpulan untuk melakukan tindakan seterusnya. Tidak seperti animasi jQuery, peralihan CSS3 tidak mempunyai panggilan balik siap terbina dalam.

Merakam Peristiwa Tamat Peralihan

Untuk mengesan tamat peralihan, jQuery menawarkan perkara berikut skrip:

<code class="javascript">$("#someSelector").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });</code>

Untuk animasi, pendekatan yang serupa boleh digunakan:

<code class="javascript">$("#someSelector").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... });</code>

Dengan melepasi semua rentetan acara awalan, skrip ini akan berfungsi merentas berbilang penyemak imbas.

Menggunakan .one() untuk Single Fire

Untuk memastikan pengendali acara menyala sekali sahaja, anda boleh menggunakan kaedah .one() jQuery dan bukannya .bind():

<code class="javascript">$("#someSelector").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });

$("#someSelector").one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... });</code>

Penolakan dan Pendekatan Moden

kaedah .bind() jQuery kini tidak digunakan lagi. Pendekatan pilihan ialah .on(), yang berfungsi bersama dengan .off(). Berikut ialah contoh:

<code class="javascript">$("#someSelector")
.on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd",
 function(e){
    // do something here
    $(this).off(e);
 });</code>

Pendekatan ini memastikan bahawa fungsi panggil balik dilaksanakan sekali sahaja.

Atas ialah kandungan terperinci Bagaimana untuk Mengesan Penghujung Peralihan dan Animasi CSS3 dengan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!