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

Menunggu Peralihan CSS3 dengan jQuery

Apabila menggunakan peralihan CSS3 untuk menganimasikan elemen, menentukan masa animasi telah selesai boleh menjadi mencabar. Tidak seperti animasi jQuery, yang membenarkan panggilan balik apabila animasi selesai, peralihan CSS3 tidak menyediakan mekanisme sedemikian. Walau bagaimanapun, terdapat penyelesaian menggunakan jQuery.

Mengesan Penyelesaian Peralihan

jQuery menyediakan pendengar acara yang boleh digunakan untuk mengesan tamat peralihan CSS3. Pendengar ini ialah:

• transitionend
• webkitTransitionEnd
• oTransitionEnd
• MSTransitionEnd

Anda boleh mengikat acara ini menggunakan kaedah bind() pada pemilih yang ingin anda jejaki. Contohnya:

$("#someSelector").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
    // Code to execute when the transition ends
});

Mengesan Penyiapan Animasi

Sama seperti peralihan, animasi juga boleh dikesan menggunakan acara jQuery pendengar:

• animationend
• webkitAnimationEnd
• oAnimationEnd
• MSAnimationEnd

Gunakan kaedah bind sebelum:

$("#someSelector").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){
    // Code to execute when the animation ends
});

Pencatatan Acara Satu Kali

Untuk memastikan pengendali acara hanya menyala sekali, gunakan kaedah .one() jQuery:

$("#someSelector").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
    // Code to execute when the transition ends
});

$("#someSelector").one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){
    // Code to execute when the animation ends
});

Amalan Terbaik

• Lepaskan semua rentetan acara awalan penyemak imbas ke dalam kaedah bind() ke sokong semua penyemak imbas.
• Gunakan .one() untuk menghalang pengendali daripada menembak beberapa kali.
• kaedah bind() jQuery ditamatkan; on() lebih disukai pada versi 1.7.
• Sebagai alternatif, gunakan off() untuk menanggalkan panggilan balik selepas acara dicetuskan untuk memastikan ia menyala sekali sahaja.

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