Bagaimana untuk Mengesan Penghujung Peralihan dan Animasi CSS3 dalam jQuery?

Memantau Penyelesaian Peralihan dan Animasi CSS3 dalam jQuery

Dalam pembangunan web, selalunya wajar untuk memadamkan elemen dan seterusnya mengalih keluarnya daripada DOM apabila animasi siap. Walaupun ini mudah dengan keupayaan animasi jQuery, melanjutkannya kepada peralihan CSS3 memerlukan mekanisme untuk mengesan kesimpulannya.

Syukurlah, jQuery menyediakan jalan untuk menangani isu ini:

Peralihan

Untuk mengesan penghujung peralihan CSS melalui jQuery, gunakan pengikat peristiwa berikut:

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

Mozilla menghuraikan lebih lanjut mengenai perkara ini di https://developer.mozilla.org/en -US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#Detecting_the_start_and_completion_of_a_transition

Animations

Untuk animasi, pendekatannya adalah serupa>

>

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

Perkara penting yang perlu diambil perhatian ialah, dengan menggunakan kaedah bind() dengan semua rentetan acara awalan penyemak imbas secara serentak, anda boleh memastikan sokongan untuk semua penyemak imbas dengan fungsi ini.

Mengoptimumkan Pengendalian Acara

Untuk mengehadkan penembakan pengendali kepada satu kejadian, gunakan kaedah .one() jQuery, seperti:

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

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

Penamatan Kaedah dan Alternatif Moden

Perlu diakui bahawa kaedah bind() jQuery telah ditamatkan pada jQuery 1.7 yang memihak kepada kaedah on(). Selain itu, anda boleh memanfaatkan kaedah off() dalam fungsi panggil balik untuk menjamin pelaksanaan sekali, seperti yang ditunjukkan dalam contoh ini:

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

Pendekatan ini mempunyai kesan yang sama seperti menggunakan kaedah one() .

Sumber Tambahan

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

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