Tento článok poskytuje postup na spustenie funkcie JavaScript po animácii CSS.
Ako spustiť JavaScript po dokončení animácie CSS?
Javascript poskytuje „ spustenie animácie “ & “ animácia ” udalosti, ktoré umožňujú vývojárovi spustiť funkciu Javascript po spustení alebo ukončení animácie. Vďaka tomu je pre vývojárov skutočne pohodlné vykonať akúkoľvek operáciu po dokončení animácie. Syntax pre použitie „ animácia “ udalosť je nasledovná:
{ HTML element } . addEventListener ( 'animácia' , Názov funkcie ) ;
Vo vyššie uvedenej syntaxi je „ animácia ” sa poskytuje ako prvý argument pre poslucháča udalostí, za ktorým nasleduje funkcia, ktorá sa vykoná po skončení animácie. „ poslucháč udalostí ” v Javascripte spustí funkciu, ktorá mu bola pridelená vždy, keď nastane konkrétna udalosť.
Poďme pochopiť, ako môže používateľ spustiť funkciu JavaScriptu po animácii CSS pomocou vyššie definovanej syntaxe. V tejto ukážke je animovaný box, ktorý sa pohybuje nadol a opäť stúpa v „ štyri ” sekundy. Po dokončení animácie sa pomocou funkcie JavaScript zobrazí správa.
< html >
< štýl >
#myDIV {
šírka : 150 pixelov ;
výška : 150 pixelov ;
pozíciu : príbuzný ;
pozadie : svetlo zelená ;
}
@keyframes moveBox {
0 % { top : 0px ; }
päťdesiat % { top : 200 pixelov ; pozadie : Ružová ; }
100 % { top : 0px ; pozadie : svetlo zelená ; }
}
štýl >
< telo >
< h1 > Spustenie JavaScriptu po CSS Animácia h1 >
< h3 > Kliknutím na štvorec nižšie spustíte animáciu h3 >
< p id = 'pre' > p >
< div id = 'myDIV' po kliknutí = 'myFunction()' > div >
< skript >
konšt div1 = dokument. getElementById ( 'myDIV' ) ;
konšt pre = dokument. getElementById ( 'pre' ) ;
funkcia myFunction ( ) {
div1. štýl . animácie = 'moveBox 6s' ;
}
div1. addEventListener ( 'začiatok animácie' , štartFunction ) ;
div1. addEventListener ( 'animácia' , endFunction ) ;
spustenie funkcieFunction ( ) {
pre. innerHTML = 'animácia sa začala...' ;
}
funkcia endFunction ( ) {
pre. innerHTML = 'Animácia sa skončila!' ;
pre. štýl . farba = 'červená' ;
}
skript >
telo >
html >
Vysvetlenie vyššie uvedeného kódu je nasledovné:
- V '