Ovaj članak će pružiti postupak za pokretanje JavaScript funkcije nakon CSS animacije.
Kako pokrenuti JavaScript nakon završetka CSS animacije?
Javascript pruža ' početak animacije ” & “ animirajući ” događaji koji razvojnom programeru omogućuju pokretanje Javascript funkcije nakon što animacija započne ili završi. To programerima čini vrlo praktičnim izvođenje bilo koje operacije nakon što animacija završi. Sintaksa za korištenje ' animirajući ” događaj je sljedeći:
{ HTML element } . addEventListener ( 'animiranje' , NazivFunkcije ) ;
U gore navedenoj sintaksi, ' animirajući ” daje se kao prvi argument slušatelju događaja, nakon čega slijedi funkcija koja će se izvršiti nakon što animacija završi. ' slušatelj događaja ” u Javascriptu pokreće funkciju koja mu je dana kad god se dogodi određeni događaj.
Shvatimo kako korisnik može pokrenuti JavaScript funkciju nakon CSS animacije koristeći gore definiranu sintaksu. U ovoj demonstraciji okvir je animiran da se pomiče prema dolje i ponovno se pojavljuje u ' četiri ” sekundi. Nakon dovršetka animacije prikazat će se poruka pomoću JavaScript funkcije.
< html >
< stil >
#mojDIV {
širina : 150 px ;
visina : 150 px ;
položaj : relativna ;
pozadina : svijetlozelena ;
}
@keyframes moveBox {
0 % { vrh : 0px ; }
pedeset % { vrh : 200 px ; pozadina : ružičasta ; }
100 % { vrh : 0px ; pozadina : svijetlozelena ; }
}
stil >
< tijelo >
< h1 > Pokretanje JavaScripta nakon CSS Animacija h1 >
< h3 > Pritisnite donji kvadrat za početak animacije h3 >
< p id = 'za' > str >
< div id = 'myDIV' na klik = 'mojaFunkcija()' > div >
< skripta >
konst div1 = dokument. getElementById ( 'myDIV' ) ;
konst za = dokument. getElementById ( 'za' ) ;
funkcija mojaFunkcija ( ) {
div1. stil . animacija = 'moveBox 6s' ;
}
div1. addEventListener ( 'početak animacije' , startFunction ) ;
div1. addEventListener ( 'animiranje' , endFunction ) ;
funkcija startFunction ( ) {
za. unutarnjiHTML = 'Animacija je počela...' ;
}
funkcija endFunction ( ) {
za. unutarnjiHTML = 'Animacija je završila!' ;
za. stil . boja = 'Crvena' ;
}
skripta >
tijelo >
html >
Objašnjenje gornjeg koda je sljedeće:
- u '
” oznake, element s id-om “ mojDIV ” ima CSS svojstva. - Zatim, ' ključni kadar 'nazvan' moveBox ” je stvoren za potrebe animacije. Ima tri prijelazna stanja. Prvi prijelaz bit će od ' 0% ” do “ pedeset% ”. Tada će sljedeći prijelaz biti iz ' pedeset% ” do “ 100% ”.
- Zatim, unutar oznaka tijela, ' h1 ” & “ h3 ” stvaraju se elementi.
- A “ 'element s ID-om' za ” se stvara.
- A “ div 'element s ID-om' mojDIV ” se stvara. Također, funkcija pod nazivom ' mojaFunkcija() ' pruža se ' na klik ” atribut elementa div.
- Dalje, unutar '
” oznake, stvaraju se dvije konstante. Ove konstante pokazuju prema HTML elementima koristeći ' .getElementByID() ” metoda. - Funkcija pod nazivom ' mojaFunkcija() ” se stvara. Ova funkcija će animirati ' mojDIV ' element pomoću ' moveBox ” ključnih kadrova.
- Zatim se stvaraju dva slušatelja događaja koji pozivaju navedene funkcije na ' početak animacije ' događaj i ' animirajući ” događaj.
- Zatim su definirane dvije funkcije za gore navedene događaje.
Izlaz:
Može se vidjeti u donjem izlazu kada korisnik klikne na okvir, animacija počinje. U procesu animacije okvir se mijenja, pomiče se 200px prema dolje i vraća se na svoje izvorno mjesto. Tijekom kretanja mijenja se i njegova boja iz zelene u ružičastu i zatim ponovno u zelenu. Zatim, poruka ' Animacija je završila! ” prikazuje se pomoću Javascript funkcije koja se izvršava nakon završetka CSS animacije.
To je sve o pokretanju JavaScript funkcije nakon završetka CSS animacije.
Zaključak
Za pokretanje JavaScript funkcije nakon završetka CSS animacije, korisnik može koristiti slušatelja događaja. Za to korisnik mora osigurati ' animirajući ” događaj kao prvi argument, a funkcija kao drugi argument slušatelju događaja. Navedena funkcija će se izvršiti nakon što animacija završi. Ovaj članak pruža postupak za pokretanje Javascript funkcije nakon CSS animacije.