Bagaimana untuk Memantau Penghujung Peralihan dan Animasi CSS3 dengan jQuery?

Cara Memantau Kesimpulan Peralihan dan Animasi CSS3 Menggunakan jQuery

Apabila memadamkan elemen menggunakan peralihan kelegapan, adalah perkara biasa untuk alih keluar elemen daripada DOM setelah selesai. jQuery memudahkan proses ini dengan membenarkan anda menentukan penyingkiran selepas animasi siap. Walau bagaimanapun, ia menjadi lebih mencabar apabila menggunakan peralihan CSS3.

Mengesan Tamat Peralihan/Animasi

Untuk mengesan tamat peralihan melalui jQuery, anda boleh menggunakan yang berikut:

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

Mozilla menyediakan rujukan terperinci untuk pendekatan ini: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#Detecting_the_start_and_completion_of_a_transition

animasi, kaedahnya adalah serupa:

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

Anda boleh menentukan semua rentetan acara awalan penyemak imbas dalam kaedah bind() untuk memastikan keserasian.

Pengendalian Acara Perlaksanaan Tunggal

Untuk memastikan pengendali acara dicetuskan sekali sahaja, gunakan kaedah .one() jQuery:

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

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

Pemberhentian Bind()

Kaedah bind() jQuery tidak digunakan; gunakan on() sebaliknya (sebagaimana jQuery 1.7). Anda juga boleh menggunakan off() pada fungsi panggil balik untuk mendayakan penembakan tunggal. Berikut ialah contoh yang setara menggunakan on() dan off():

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

Rujukan:

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

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