Bagaimana Saya Boleh Menghalang Animasi Hover CSS3 daripada Berhenti Sebelum Matang semasa Keluar Tetikus?

Memelihara Animasi CSS3 Dicetuskan oleh :hover on Mouse Exit

Apabila menggunakan animasi CSS3 pada keadaan :hover elemen, adalah perkara biasa untuk menghadapi isu penamatan animasi secara tiba-tiba apabila kursor tetikus meninggalkan elemen. Tingkah laku ini boleh menjadi tidak diingini jika anda ingin animasi melengkapkan tempoh semula jadinya tanpa mengira kehadiran tetikus.

Penyelesaian: Menggabungkan JavaScript

Malangnya, tiada penyelesaian CSS piawai untuk keperluan ini. Untuk mengatasi had ini, anda boleh memasukkan sedikit JavaScript seperti berikut:

1. Tetapkan kelas animasi: Tambahkan kelas animasi pada elemen yang termasuk animasi yang diingini.
2. Kendalikan acara penamat animasi: Lampirkan pendengar acara pada acara penamat animasi, yang disokong oleh pelbagai penyemak imbas.
3. Alih keluar kelas animasi: Dalam pendengar acara, alih keluar kelas animasi daripada elemen, membenarkan animasi menyelesaikan pelaksanaannya.
4. Pencetus animasi pada tuding: Ubah suai pengendali tuding untuk menambah kelas animasi pada elemen apabila ia dilegar berakhir.

Contoh:

$(".box").bind("webkitAnimationEnd mozAnimationEnd animationend", function(){
  $(this).removeClass("animated");
})

$(".box").hover(function(){
  $(this).addClass("animated");
})

Kod ini melampirkan pendengar acara pada acara tamat animasi dan mengalih keluar kelas "animasi" daripada elemen pada penyempurnaannya. Selain itu, ia menambah kelas animasi yang sama apabila elemen itu dituding ke atas.

Atas ialah kandungan terperinci Bagaimana Saya Boleh Menghalang Animasi Hover CSS3 daripada Berhenti Sebelum Matang semasa Keluar Tetikus?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!