Bagaimana untuk Mengesan Penyiapan Peralihan dan Animasi CSS3 dengan jQuery?

Mengesan Penyiapan Peralihan dan Animasi CSS3 Menggunakan jQuery

Elemen peralihan dengan CSS3 menawarkan animasi yang lebih lancar daripada teknik JavaScript tradisional. Walau bagaimanapun, apabila bekerja dengan animasi CSS3, persoalan timbul: bagaimana anda boleh menentukan apabila peralihan telah selesai?

jQuery menyediakan penyelesaian untuk keperluan ini. Untuk memantau penghujung peralihan CSS3, anda boleh mengikat pengendali acara menggunakan sintaks berikut:

<code class="javascript">$("#someSelector").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });</code>

Begitu juga, untuk animasi CSS3, anda boleh menggunakan:

<code class="javascript">$("#someSelector").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... });</code>

Dengan menyediakan semua rentetan peristiwa awalan pelayar dalam kaedah bind(), anda memastikan keserasian merentas penyemak imbas.

Memastikan Pelaksanaan Tunggal Pengendali

Untuk mengelakkan pelaksanaan berulang pengendali, anda boleh menggunakan kaedah .one() jQuery. Contohnya:

<code class="javascript">$("#someSelector").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });

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

Susutnilai Kaedah .bind()

kaedah bind() jQuery telah ditamatkan dan memihak kepada .on(). Oleh itu, anda harus menggunakan:

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

Kaedah ini juga memastikan bahawa pengendali dilaksanakan sekali sahaja.

Untuk butiran lanjut, rujuk rujukan berikut:

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

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