Bagaimana untuk Memantau Penghujung Peralihan dan Animasi CSS3 dengan jQuery?-tutorial js-php.cn

Bagaimana untuk Memantau Penghujung Peralihan dan Animasi CSS3 dengan jQuery?

DDD

Lepaskan： 2024-11-08 02:45:02

asal

1054 orang telah melayarinya

How to Monitor the End of CSS3 Transitions and Animations with 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(){ ... });

Salin selepas log masuk

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(){ ... });

Salin selepas log masuk

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(){ ... });

Salin selepas log masuk

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);
 });

Salin selepas log masuk

Rujukan:

[.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!