Bolehkah Animasi CSS3 :hover Dipaksa Menyelesaikan Kitarannya Selepas Tetikus Mati?

Animasi CSS3 pada :hover; Memaksa Keseluruhan Animasi

Dalam CSS3, teknik animasi biasa menggunakan :hover untuk mencetuskan animasi pada elemen. Walau bagaimanapun, apabila kursor dialih keluar daripada elemen, animasi akan berhenti secara tiba-tiba.

Soalan

Bolehkah animasi CSS3 pada :hover dipaksa untuk meneruskan kitaran animasi penuh walaupun selepas tetikus meninggalkan elemen ?

Jawapan

Malangnya, CSS3 sahaja tidak dapat mencapainya. Satu-satunya penyelesaian ialah menggunakan gabungan CSS dan JavaScript.

Penyelesaian JavaScript

Berikut ialah cara untuk mencapai hasil yang diingini menggunakan JavaScript:

• Tambah animasi sebagai kelas kepada elemen.
• Alih keluar kelas animasi sebaik sahaja animasi selesai.

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

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

Pendekatan ini memastikan animasi meneruskan kitaran penuhnya tanpa mengira kedudukan kursor pada elemen.

Atas ialah kandungan terperinci Bolehkah Animasi CSS3 :hover Dipaksa Menyelesaikan Kitarannya Selepas Tetikus Mati?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!