Den här artikeln kommer att tillhandahålla proceduren för att köra en JavaScript-funktion efter en CSS-animering.
Hur kör jag JavaScript efter att CSS-animeringen är klar?
Javascript tillhandahåller ' animationstart ” & “ animerar ”-händelser som låter utvecklaren köra en Javascript-funktion när en animering startar eller slutar. Detta gör det väldigt bekvämt för utvecklarna att utföra vilken operation som helst efter att animeringen är klar. Syntaxen för att använda ' animerar ” evenemanget är som följer:
{ HTML element } . addEventListener ( 'animera' , Funktionsnamn ) ;
I den ovan angivna syntaxen ' animerar ” tillhandahålls som det första argumentet till händelseavlyssnaren, följt av funktionen som kommer att köras när animeringen slutar. En ' evenemangslyssnare ” i Javascript aktiverar funktionen som ges till den när en specifik händelse inträffar.
Låt oss förstå hur en användare kan köra en JavaScript-funktion efter en CSS-animering med den ovan definierade syntaxen. I denna demonstration animeras en ruta för att flytta ner och komma upp igen i ' fyra ' sekunder. När animeringen är klar kommer ett meddelande att visas med hjälp av en JavaScript-funktion.
< html >
< stil >
#myDIV {
bredd : 150 pixlar ;
höjd : 150 pixlar ;
placera : relativ ;
bakgrund : ljusgrön ;
}
@keyframes moveBox {
0 % { topp : 0px ; }
femtio % { topp : 200 pixlar ; bakgrund : rosa ; }
100 % { topp : 0px ; bakgrund : ljusgrön ; }
}
stil >
< kropp >
< h1 > Köra JavaScript efter CSS Animation h1 >
< h3 > Klicka på rutan nedanför för att starta animeringen h3 >
< p id = 'för' > sid >
< div id = 'myDIV' onclick = 'myFunction()' > div >
< manus >
konst div1 = dokumentera. getElementById ( 'myDIV' ) ;
konst för = dokumentera. getElementById ( 'för' ) ;
funktion myFunction ( ) {
div1. stil . animation = 'moveBox 6s' ;
}
div1. addEventListener ( 'animationstart' , startFunction ) ;
div1. addEventListener ( 'animera' , endFunction ) ;
funktion startFunktion ( ) {
för. innerHTML = 'Animeringen har börjat...' ;
}
funktion endFunction ( ) {
för. innerHTML = 'Animeringen har tagit slut!' ;
för. stil . Färg = 'röd' ;
}
manus >
kropp >
html >
Förklaringen av ovanstående kod är följande:
- I '
' taggar, elementet med id ' myDIV ” är försedd med CSS-egenskaper. - Nästa, en ' nyckelbildruta ' som heter ' moveBox ” är skapad för animationsändamål. Den har tre övergångstillstånd. Den första övergången kommer att vara från ' 0 % ' till ' femtio% ”. Sedan blir nästa övergång från ' femtio% ' till ' 100 % ”.
- Sedan, inuti body-taggarna, ' h1 ” & “ h3 '-element skapas.
- en ' ' element med id ' för ' är skapad.
- en ' div ' element med id ' myDIV ' är skapad. Även en funktion som heter ' myFunction() ” tillhandahålls till ” onclick ” attribut för div-elementet.
- Därefter inuti '