Heim >Web-Frontend >CSS-Tutorial >Wie kann ich sicherstellen, dass CSS3-Animationen beim Beenden des :hover-Elements vollständig sind?

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

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-12-08 00:06:12291Durchsuche

How Can I Ensure CSS3 Animations Complete on :hover Element Exit?

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn