Ta članek ponuja postopek za zagon funkcije JavaScript po animaciji CSS.
Kako zagnati JavaScript po končani animaciji CSS?
Javascript zagotavlja ' animationstart ” & “ animiranje ” dogodki, ki razvijalcu omogočajo zagon funkcije Javascript, ko se animacija začne ali konča. Zaradi tega je razvijalcem zelo priročno izvesti katero koli operacijo po koncu animacije. Sintaksa za uporabo ' animiranje ” dogodek je naslednji:
{ HTML element } . addEventListener ( 'animiranje' , ImeFunkcije ) ;
V zgoraj navedeni sintaksi je » animiranje ” je na voljo kot prvi argument poslušalcu dogodkov, ki mu sledi funkcija, ki bo izvedena, ko se animacija konča. ' poslušalec dogodkov ” v Javascriptu sproži funkcijo, ki mu je dodeljena, kadar koli se zgodi določen dogodek.
Razumejmo, kako lahko uporabnik zažene funkcijo JavaScript po animaciji CSS z uporabo zgoraj definirane sintakse. V tej predstavitvi je polje animirano, da se premakne navzdol in se spet dvigne v ' štiri ” sekund. Ko je animacija končana, se prikaže sporočilo s funkcijo JavaScript.
< html >
< stil >
#myDIV {
premer : 150 slikovnih pik ;
višina : 150 slikovnih pik ;
položaj : relativno ;
ozadje : svetlo zelena ;
}
@keyframes moveBox {
0 % { vrh : 0px ; }
petdeset % { vrh : 200 slikovnih pik ; ozadje : roza ; }
100 % { vrh : 0px ; ozadje : svetlo zelena ; }
}
stil >
< telo >
< h1 > Zagon JavaScripta po CSS Animacija h1 >
< h3 > Za začetek animacije kliknite na spodnji kvadrat h3 >
< p id = 'za' > str >
< div id = 'myDIV' onclick = 'mojaFunkcija()' > div >
< scenarij >
konst div1 = dokument. getElementById ( 'myDIV' ) ;
konst za = dokument. getElementById ( 'za' ) ;
funkcija myFunction ( ) {
div1. stil . animacija = 'moveBox 6s' ;
}
div1. addEventListener ( 'začetek animacije' , startFunction ) ;
div1. addEventListener ( 'animiranje' , endFunction ) ;
funkcija startFunction ( ) {
za. notranjiHTML = 'Animacija se je začela ...' ;
}
funkcija endFunction ( ) {
za. notranjiHTML = 'Animacija se je končala!' ;
za. stil . barva = 'rdeča' ;
}
scenarij >
telo >
html >
Razlaga zgornje kode je naslednja:
- V '
” oznake, element z id “ mojDIV ” ima lastnosti CSS. - Naprej, ' ključni okvir 'imenovan' moveBox ” je ustvarjen za namene animacije. Ima tri prehodna stanja. Prvi prehod bo iz » 0 % ' do ' petdeset % ”. Nato bo naslednji prehod iz » petdeset % ' do ' 100 % ”.
- Nato je znotraj telesnih oznak » h1 ” & “ h3 ” so ustvarjeni elementi.
- A “ ' element z id ' za « je ustvarjen.
- A “ div ' element z id ' mojDIV « je ustvarjen. Tudi funkcija z imenom ' mojaFunkcija() « je na voljo » onclick ” elementa div.
- Nato znotraj »
” se ustvarita dve konstanti. Te konstante kažejo na elemente HTML z uporabo ' .getElementByID() ” metoda. - Funkcija z imenom ' mojaFunkcija() « je ustvarjen. Ta funkcija bo animirala ' mojDIV ' z uporabo ' moveBox ” ključnih slik.
- Nato se ustvarita dva poslušalca dogodkov, ki kličeta podane funkcije na ' animationstart ' dogodek in ' animiranje ” dogodek.
- Nato sta definirani dve funkciji za zgoraj omenjene dogodke.
Izhod:
To je mogoče videti v spodnjem izpisu, ko uporabnik klikne na polje, se začne animacija. V procesu animacije se polje spremeni, premakne za 200 slikovnih pik navzdol in se vrne na prvotno mesto. Med gibanjem se spremeni tudi njegova barva iz zelene v rožnato in nato spet v zeleno. Sledi sporočilo » Animacija je končana! ” se prikaže z uporabo funkcije Javascript, ki se izvede, ko je animacija CSS končana.
To je vse o izvajanju funkcije JavaScript po končani animaciji CSS.
Zaključek
Za zagon funkcije JavaScript po končani animaciji CSS lahko uporabnik uporabi poslušalca dogodkov. Za to mora uporabnik zagotoviti » animiranje ” dogodek kot prvi argument in funkcijo kot drugi argument poslušalca dogodkov. Navedena funkcija bo izvedena po koncu animacije. Ta članek ponuja postopek za izvajanje funkcije Javascript po animaciji CSS.