Wie kann ich sicherstellen, dass CSS3-Animationen beim Beenden des :hover-Elements vollständig sind?

CSS3-Animationsabschluss beim :hover-Elementausgang erzwingen

CSS3-Animationen im :hover-Zustand bieten eine elegante Möglichkeit, Elementen Interaktivität hinzuzufügen. Eine Einschränkung besteht jedoch darin, dass die Animation abrupt abbricht, wenn der Cursor das Element verlässt. Hier erfahren Sie, wie Sie dieses Problem beheben und die Ausführung der Animation erzwingen können, und zwar ausschließlich über CSS:

Die bereitgestellte Animation „Bounce“ definiert eine Reihe von Keyframes, die einen Bounce-Effekt erzeugen. Um zu erzwingen, dass die Animation auch dann weiterläuft, wenn die Maus das Element verlässt, wenden wir eine clevere Technik an.

1. Fügen Sie einen Klassenauslöser hinzu:
   Erstellen Sie eine separate Klasse, sagen Sie „ animiert‘, mit der entsprechenden Animation (die gleichen Bounce-Keyframes, die Sie definiert haben).
2. Lösen Sie die Animation mit aus Hover:
   Fügen Sie im :hover-Status des Elements die animierte Klasse hinzu, anstatt die Animation direkt anzuwenden. Diese Klasse enthält die eigentliche Animation.
3. Entfernen Sie den Auslöser am Ende der Animation:
   Verwenden Sie JavaScript, um auf das Endereignis der Animation zu warten. Wenn die Animation abgeschlossen ist, entfernen Sie die animierte Klasse aus dem Element. Dadurch wird die Animation effektiv gestoppt.

Hier ist ein modifiziertes Beispiel:

<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");        
})

Bei diesem Ansatz wird die Animation auch dann weiter abgespielt, wenn der Cursor die .box verlässt Element. Besuchen Sie dieses aktualisierte Fiddle für eine Live-Demonstration: http://jsfiddle.net/u7vXT/1.

Das obige ist der detaillierte Inhalt vonWie kann ich sicherstellen, dass CSS3-Animationen beim Beenden des :hover-Elements vollständig sind?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!