Bagaimanakah Saya Boleh Memastikan Animasi CSS3 Selesai pada :hover Element Exit?

Paksa Penyiapan Animasi CSS3 pada :hover Element Exit

Animasi CSS3 dalam keadaan :hover menyediakan cara yang elegan untuk menambah interaktiviti pada elemen. Walau bagaimanapun, satu had ialah animasi dibatalkan secara tiba-tiba apabila kursor meninggalkan elemen. Berikut ialah cara untuk mengatasi isu ini dan memaksa animasi untuk menyelesaikan pelaksanaannya, semata-mata melalui CSS:

Animasi yang disediakan, lantunan, mentakrifkan satu siri bingkai utama yang mencipta kesan lantunan. Untuk memaksa animasi diteruskan walaupun selepas tetikus keluar dari elemen, kami menggunakan teknik yang bijak.

1. Tambah Pencetus Kelas:
   Buat kelas yang berasingan, sebut ' dianimasikan', dengan animasi sepadannya (frame kunci lantunan yang sama yang anda tetapkan).
2. Cetuskan Animasi dengan Tuding:
   Dalam keadaan :legar elemen, bukannya menggunakan animasi secara langsung, tambah kelas animasi. Kelas ini mengandungi animasi sebenar.
3. Alih Keluar Pencetus pada Tamat Animasi:
   Gunakan JavaScript untuk mendengar acara tamat animasi. Apabila animasi selesai, alih keluar kelas animasi daripada elemen. Ini akan menghentikan animasi dengan berkesan.

Berikut ialah contoh yang diubah suai:

<style>
@keyframes bounce { /* Same as before */ }
.animated { animation: bounce 1s; }
</style>

<div class="box">
  Hover me!
</div>

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

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

Dengan pendekatan ini, animasi akan terus dimainkan walaupun selepas kursor meninggalkan .box unsur. Lawati Fiddle yang dikemas kini ini untuk demonstrasi langsung: http://jsfiddle.net/u7vXT/1.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memastikan Animasi CSS3 Selesai pada :hover Element Exit?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!