In diesem Artikel wird das Verfahren zum Ausführen einer JavaScript-Funktion nach einer CSS-Animation beschrieben.
Wie führe ich JavaScript aus, nachdem die CSS-Animation abgeschlossen ist?
Javascript bietet die „ Animationsstart ” & „ animationend „Ereignisse, die es dem Entwickler ermöglichen, eine Javascript-Funktion auszuführen, sobald eine Animation beginnt oder endet. Dies macht es für die Entwickler sehr bequem, jeden Vorgang auszuführen, nachdem die Animation abgeschlossen ist. Die Syntax für die Verwendung von „ animationend Das Ereignis lautet wie folgt:
{ HTML Element } . addEventListener ( 'animationend' , Funktionsname ) ;
In der oben angegebenen Syntax lautet „ animationend „ wird als erstes Argument für den Ereignis-Listener bereitgestellt, gefolgt von der Funktion, die ausgeführt wird, sobald die Animation endet. Ein ' Ereignis-Listener „in Javascript löst die ihm zugewiesene Funktion aus, wenn ein bestimmtes Ereignis eintritt.
Lassen Sie uns verstehen, wie ein Benutzer mithilfe der oben definierten Syntax eine JavaScript-Funktion nach einer CSS-Animation ausführen kann. In dieser Demonstration wird eine Kiste animiert, sich nach unten zu bewegen und wieder hochzukommen in „ vier ” Sekunden. Nach Abschluss der Animation wird mithilfe einer JavaScript-Funktion eine Meldung angezeigt.
< html >
< Stil >
#meinDIV {
Breite : 150px ;
Höhe : 150px ;
Position : relativ ;
Hintergrund : hellgrün ;
}
@keyframes moveBox {
0 % { Spitze : 0px ; }
fünfzig % { Spitze : 200px ; Hintergrund : Rosa ; }
100 % { Spitze : 0px ; Hintergrund : hellgrün ; }
}
Stil >
< Körper >
< h1 > Ausführen von JavaScript nach dem CSS Animation h1 >
< h3 > Klicken Sie auf das Quadrat unten, um die Animation zu starten h3 >
< p-ID = 'für' > P >
< Div-ID = „meinDIV“ onclick = „meineFunktion()“ > div >
< Skript >
const div1 = dokumentieren. getElementById ( „meinDIV“ ) ;
const für = dokumentieren. getElementById ( 'für' ) ;
Funktion myFunction ( ) {
div1. Stil . Animation = „moveBox 6s“ ;
}
div1. addEventListener ( „Animationsstart“ , startFunktion ) ;
div1. addEventListener ( 'animationend' , endFunction ) ;
Funktion startFunction ( ) {
für. innerHTML = „Die Animation hat begonnen…“ ;
}
Funktion endFunction ( ) {
für. innerHTML = „Die Animation ist beendet!“ ;
für. Stil . Farbe = 'Rot' ;
}
Skript >
Körper >
html >
Die Erklärung des obigen Codes lautet wie folgt:
- Im '
„Tags, das Element mit der ID“ meinDIV ” ist mit CSS-Eigenschaften versehen. - Als nächstes ein „ Schlüsselbild ' genannt ' moveBox „wird zu Animationszwecken erstellt. Es gibt drei Übergangsstaaten. Der erste Übergang erfolgt von „ 0% ' Zu ' fünfzig% “. Dann erfolgt der nächste Übergang von „ fünfzig% ' Zu ' 100% “.
- Dann wird innerhalb der Body-Tags das „ h1 ” & „ h3 „Elemente werden erstellt.
- A ' „Element mit ID“ für ' geschaffen.
- A ' div „Element mit der ID“ meinDIV ' geschaffen. Außerdem gibt es eine Funktion namens „ meineFunktion() ” wird bereitgestellt an die „ onclick ”-Attribut des div-Elements.
- Als nächstes innerhalb des „
”-Tags werden zwei Konstanten erstellt. Diese Konstanten verweisen auf die HTML-Elemente mit dem „ .getElementByID() ' Methode. - Eine Funktion namens „ meineFunktion() ' geschaffen. Diese Funktion animiert das „ meinDIV ”-Element mit dem „ moveBox ” Keyframes.
- Als nächstes werden zwei Ereignis-Listener erstellt, die die angegebenen Funktionen auf der „ Animationsstart ” Veranstaltung und die „ animationend ' Ereignis.
- Anschließend werden zwei Funktionen für die oben genannten Ereignisse definiert.
Ausgabe:
In der folgenden Ausgabe ist zu sehen, dass die Animation startet, wenn der Benutzer auf das Feld klickt. Während des Animationsprozesses verändert sich die Box, bewegt sich um 200 Pixel nach unten und kehrt an ihren ursprünglichen Platz zurück. Während der Bewegung ändert sich auch seine Farbe von Grün nach Rosa und dann wieder nach Grün. Als nächstes erscheint die Meldung „ Die Animation ist beendet! „wird mithilfe einer Javascript-Funktion angezeigt, die nach Abschluss der CSS-Animation ausgeführt wird.
Dabei geht es darum, nach Abschluss der CSS-Animation eine JavaScript-Funktion auszuführen.
Abschluss
Um eine JavaScript-Funktion nach Abschluss einer CSS-Animation auszuführen, kann der Benutzer einen Ereignis-Listener verwenden. Hierzu muss der Nutzer die Angabe „ animationend „Ereignis als erstes Argument und eine Funktion als zweites Argument für den Ereignis-Listener. Die angegebene Funktion wird ausgeführt, nachdem die Animation beendet ist. In diesem Artikel wird das Verfahren zum Ausführen einer Javascript-Funktion nach einer CSS-Animation beschrieben.