Wie kann ich verhindern, dass CSS3-Hover-Animationen beim Beenden der Maus vorzeitig gestoppt werden?

Beibehalten von CSS3-Animationen, die durch :hover beim Beenden der Maus ausgelöst werden

Beim Einsatz von CSS3-Animationen im :hover-Zustand eines Elements kommt es häufig vor, dass das Problem auftritt Problem des plötzlichen Abbruchs der Animation, wenn der Mauszeiger das Element verlässt. Dieses Verhalten kann unerwünscht sein, wenn Sie möchten, dass die Animation unabhängig von der Mauspräsenz ihre natürliche Dauer abläuft.

Lösung: Einbindung von JavaScript

Leider gibt es keine standardisierte CSS-Lösung für diese Anforderung. Um diese Einschränkung zu überwinden, können Sie wie folgt ein wenig JavaScript integrieren:

1. Animationsklasse zuweisen: Fügen Sie eine Animationsklasse zu dem Element hinzu, das die gewünschte Animation enthält.
2. Animationsendereignis verarbeiten: Hängen Sie einen Ereignis-Listener an das Animationsendereignis an, das von verschiedenen unterstützt wird Browser.
3. Animationsklasse entfernen:Entfernen Sie im Ereignis-Listener die Animationsklasse aus dem Element, damit die Animation ihre Ausführung abschließen kann.
4. Animation auslösen bei Hover: Ändern Sie den Hover-Handler, um die Animationsklasse zum Element hinzuzufügen, wenn der Hover darüber gehalten wird vorbei.

Beispiel:

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

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

Dieser Code hängt einen Ereignis-Listener an das Endereignis der Animation an und entfernt die Klasse „animiert“ aus dem Element seine Vollendung. Darüber hinaus wird dieselbe Animationsklasse hinzugefügt, wenn der Mauszeiger über das Element bewegt wird.

Das obige ist der detaillierte Inhalt vonWie kann ich verhindern, dass CSS3-Hover-Animationen beim Beenden der Maus vorzeitig gestoppt werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!