Bagaimanakah Saya Boleh Menggunakan jQuery untuk Mengesan Penghujung Peralihan dan Animasi CSS3?

Menggunakan jQuery untuk Mengesan Penghujung Peralihan dan Animasi CSS3

Melaksanakan tindakan setelah selesai peralihan CSS dan animasi sering timbul semasa pembangunan web . Untuk mencapai ini dengan jQuery, seseorang mesti menggunakan pendekatan yang berbeza untuk kedua-dua jenis animasi ini.

Mengendalikan Peralihan:

Untuk peralihan, jQuery menawarkan pendengar yang mudah yang mengesan kesimpulan peralihan:

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

Pengendalian Animasi:

Begitu juga, untuk animasi, pendengar yang serupa wujud:

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

Untuk menyokong semua penyemak imbas yang serasi, semua rentetan acara awalan penyemak imbas boleh dihantar ke bind() kaedah serentak.

Acara Sekali Menembak:

Untuk memastikan pengendali menyala sekali sahaja, Duck mencadangkan menggunakan kaedah .one() jQuery:

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

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

Menggunakan Acara jQuery Moden:

Adalah penting untuk ambil perhatian bahawa bind() telah ditamatkan dalam jQuery 1.7. Kaedah pilihan adalah on(), dan untuk memastikan fungsi panggil balik diaktifkan sekali sahaja, gunakan off().

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

Dengan memahami kaedah ini, pembangun boleh melaksanakan tindakan dengan berkesan apabila peralihan dan animasi CSS3 selesai, membenarkan untuk pengalaman web yang lebih responsif dan mengasyikkan.

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