Ich habe zwei CSS @keyframe Animationen auf dasselbe Element angewendet. Eine, die auf :hover und die andere, die bei Mouse-Out ausgelöst wird, ausgelöst wird, beide mit CSS angewendet.
Ich war neugierig zu wissen, ob es eine Möglichkeit gibt, das Ende einer ausgewählten Keyframe-Animation zu erkennen, anstatt es an das Element anzuhängen und zweimal zu zünden?
Wenn es eine Möglichkeit gab, das Ende einer ausgewählten Keyframe-Animation zu erkennen
Wenn Sie die Endung einer Keyframe-Animation selbst erkennen möchten, anstatt das Ende jedes Keyframes zu erkennen, können Sie dies mit animationend event . Dieses Ereignis wird jedes Mal ausgelöst, wenn eine Animation, die an das Element angehängt ist, abgeschlossen ist und die Kontextinformationen einen Parameter namens animationName haben, mit dem wir herausfinden können, welche Animation beendet wurde.
Der Parameter animationName ist wichtig, denn wenn mehrere Animationen auf das gleiche Element wie in Ihrem Fall angewendet würden, müssten Sie wissen, welche Animation tatsächlich beendet wurde, da dieses Ereignis am Ende jeder Animation ausgelöst würde.
Verwenden von Vanille JS:
jQuery verwenden:
Im obigen Ausschnitt können Sie sehen, wie der Inhalt von .output div den Namen der Animation angibt, die nach Abschluss jeder Animation beendet wird.
Hinweis: CSS-Animationen benötigen in einigen Browsern / Versionen immer noch Hersteller-Präfixe. Um auf der sicheren Seite zu sein, müssen Sie auch auf die Präfix-Versionen des Animationsereignisses warten.
Tags und Links javascript html jquery css css-animations