Bagaimanakah Saya Boleh Mengesan Penyiapan Peralihan dan Animasi CSS3 dalam jQuery?

Mengesan Penyiapan Peralihan dan Animasi CSS3

Apabila bekerja dengan animasi atau peralihan CSS3, cabaran biasa timbul: menentukan apabila animasi atau peralihan telah selesai. Pengetahuan ini penting untuk melaksanakan tindakan seterusnya, seperti mengalih keluar elemen daripada DOM.

Dalam jQuery, anda mempunyai pilihan untuk menentukan "Alih Keluar" berlaku selepas animasi selesai. Walau bagaimanapun, untuk peralihan atau animasi CSS3, terdapat cara khusus untuk mengesan titik akhir mereka.

Peralihan

Untuk peralihan, jQuery menyediakan kaedah untuk mendengar penghujung peralihan:

$("#someSelector").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });

Animasi

Begitu juga, untuk animasi, anda boleh gunakan:

$("#someSelector").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... });

Perhatikan bahawa anda boleh menghantar semua rentetan peristiwa awalan penyemak imbas ke dalam kaedah bind() untuk memastikan acara itu disokong merentas berbilang penyemak imbas.

Pengendalian Acara Satu Kali

Untuk memastikan pengendali acara dicetuskan sekali sahaja, anda boleh menggunakan jQuery's one() kaedah:

$("#someSelector").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });
$("#someSelector").one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... });

Kaedah Ditamatkan

Pada masa ini, kaedah bind() jQuery ditamatkan dan on() diutamakan. Anda juga boleh menggunakan off() pada fungsi panggil balik untuk menentukan bahawa ia harus dicetuskan sekali sahaja. Berikut ialah contoh:

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

Rujukan

• [kaedah jQuery .off()](https://api.jquery.com/off/)
• [kaedah jQuery .one()](https://api.jquery.com/one/)

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengesan Penyiapan Peralihan dan Animasi CSS3 dalam jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!