Šajā rakstā tiks sniegta procedūra JavaScript funkcijas palaišanai pēc CSS animācijas.
Kā palaist JavaScript pēc CSS animācijas pabeigšanas?
Javascript nodrošina ' animācijas sākums '&' animācijas ” notikumi, kas ļauj izstrādātājam palaist Javascript funkciju, kad animācija sākas vai beidzas. Tas padara izstrādātājiem patiešām ērtu jebkuras darbības veikšanu pēc animācijas pabeigšanas. Sintakse, lai izmantotu ' animācijas ” pasākums ir šāds:
{ HTML elements } . addEventListener ( 'animācija' , Funkcijas nosaukums ) ;
Iepriekš sniegtajā sintaksē ' animācijas ” tiek nodrošināts kā pirmais arguments notikumu klausītājam, kam seko funkcija, kas tiks izpildīta, kad animācija beigsies. “ notikumu klausītājs ” Javascript aktivizē tam piešķirto funkciju ikreiz, kad notiek konkrēts notikums.
Sapratīsim, kā lietotājs var palaist JavaScript funkciju pēc CSS animācijas, izmantojot iepriekš definēto sintaksi. Šajā demonstrācijā lodziņš ir animēts, lai pārvietotos uz leju un atkal parādās ' četri ” sekundes. Kad animācija ir pabeigta, tiks parādīts ziņojums, izmantojot JavaScript funkciju.
< html >
< stils >
#mansDIV {
platums : 150 pikseļi ;
augstums : 150 pikseļi ;
pozīciju : radinieks ;
fons : gaiši zaļš ;
}
@keyframes moveBox {
0 % { tops : 0 pikseļi ; }
piecdesmit % { tops : 200 pikseļi ; fons : rozā ; }
100 % { tops : 0 pikseļi ; fons : gaiši zaļš ; }
}
stils >
< ķermenis >
< h1 > JavaScript palaišana pēc CSS Animācija h1 >
< h3 > Noklikšķiniet uz zemāk esošā kvadrāta, lai sāktu animāciju h3 >
< p id = 'priekš' > lpp >
< div id = 'mans DIV' onclick = 'myFunction()' > div >
< skripts >
konst div1 = dokumentu. getElementById ( 'mans DIV' ) ;
konst priekš = dokumentu. getElementById ( 'priekš' ) ;
funkcija myFunction ( ) {
div1. stils . animācija = 'moveBox 6s' ;
}
div1. addEventListener ( 'animācijas sākums' , startFunction ) ;
div1. addEventListener ( 'animācija' , endFunction ) ;
funkcija startFunction ( ) {
priekš. innerHTML = 'Animācija ir sākusies...' ;
}
funkcija endFunction ( ) {
priekš. innerHTML = 'Animācija ir beigusies!' ;
priekš. stils . krāsa = 'sarkans' ;
}
skripts >
ķermenis >
html >
Iepriekš minētā koda skaidrojums ir šāds:
- Iekš '
' tagi, elements ar id ' myDIV ” ir nodrošināts ar CSS rekvizītiem. - Tālāk “ atslēgas kadrs 'nosaukts' MoveBox ” ir izveidots animācijas nolūkos. Tam ir trīs pārejas stāvokļi. Pirmā pāreja būs no “ 0% 'uz' piecdesmit% ”. Pēc tam nākamā pāreja būs no “ piecdesmit% 'uz' 100% ”.
- Pēc tam pamatteksta tagu iekšpusē ir redzams “ h1 '&' h3 ” elementi tiek izveidoti.
- A ' 'elements ar ID' priekš ” tiek izveidots.
- A ' div 'elements ar ID' myDIV ” tiek izveidots. Arī funkcija ar nosaukumu ' myFunction() ” tiek nodrošināts onclick ” div elementa atribūts.
- Tālāk sadaļā “
” tagiem, tiek izveidotas divas konstantes. Šīs konstantes norāda uz HTML elementiem, izmantojot ' .getElementByID() ” metode. - Funkcija ar nosaukumu ' myFunction() ” tiek izveidots. Šī funkcija animēs ' myDIV ' elements, izmantojot ' MoveBox ” atslēgkadri.
- Pēc tam tiek izveidoti divi notikumu klausītāji, kas izsauc norādītās funkcijas animācijas sākums 'pasākums un ' animācijas ” pasākums.
- Pēc tam tiek definētas divas funkcijas iepriekšminētajiem notikumiem.
Izvade:
To var redzēt zemāk esošajā izvadā, kad lietotājs noklikšķina uz lodziņa, sākas animācija. Animācijas procesā lodziņš mainās, tiek pārvietots par 200 pikseļiem uz leju un atgriežas sākotnējā vietā. Kustības laikā arī tā krāsa mainās no zaļas uz rozā un tad atkal uz zaļu. Tālāk tiek parādīts ziņojums ' Animācija ir beigusies! ” tiek parādīts, izmantojot Javascript funkciju, kas tiek izpildīta pēc CSS animācijas pabeigšanas.
Tas viss attiecas uz JavaScript funkcijas palaišanu pēc CSS animācijas pabeigšanas.
Secinājums
Lai palaistu JavaScript funkciju pēc CSS animācijas pabeigšanas, lietotājs var izmantot notikumu klausītāju. Lai to izdarītu, lietotājam ir jāiesniedz ' animācijas ” notikumu kā pirmo argumentu un funkciju kā otro argumentu notikumu klausītājam. Norādītā funkcija tiks izpildīta pēc animācijas pabeigšanas. Šajā rakstā ir sniegta procedūra Javascript funkcijas palaišanai pēc CSS animācijas.