Denne artikkelen vil gi prosedyren for å kjøre en JavaScript-funksjon etter en CSS-animasjon.
Hvordan kjøre JavaScript etter at CSS-animasjonen er fullført?
Javascript gir ' animasjon starter ' & ' animere ” hendelser som lar utvikleren kjøre en Javascript-funksjon når en animasjon starter eller slutter. Dette gjør det veldig praktisk for utviklerne å utføre enhver operasjon etter at animasjonen er ferdig. Syntaksen for å bruke ' animere ' arrangementet er som følger:
{ HTML element } . addEventListener ( 'animere' , Funksjonsnavn ) ;
I den ovenfor angitte syntaksen, ' animere ” gis som det første argumentet til hendelseslytteren, etterfulgt av funksjonen som vil bli utført når animasjonen avsluttes. en ' hendelseslytter ” i Javascript avfyrer funksjonen som er gitt til den når en bestemt hendelse skjer.
La oss forstå hvordan en bruker kan kjøre en JavaScript-funksjon etter en CSS-animasjon ved å bruke den ovenfor definerte syntaksen. I denne demonstrasjonen er en boks animert for å bevege seg ned og komme opp igjen i ' fire ' sekunder. Etter at animasjonen er fullført, vil en melding vises ved hjelp av en JavaScript-funksjon.
< html >
< stil >
#myDIV {
bredde : 150 piksler ;
høyde : 150 piksler ;
posisjon : slektning ;
bakgrunn : lysegrønn ;
}
@keyframes moveBox {
0 % { topp : 0px ; }
femti % { topp : 200 piksler ; bakgrunn : rosa ; }
100 % { topp : 0px ; bakgrunn : lysegrønn ; }
}
stil >
< kropp >
< h1 > Kjører JavaScript etter CSS Animasjon h1 >
< h3 > Klikk på kvadratet nedenfor for å starte animasjonen h3 >
< p id = 'til' > s >
< div id = 'myDIV' ved trykk = 'myFunction()' > div >
< manus >
konst div1 = dokument. getElementById ( 'myDIV' ) ;
konst til = dokument. getElementById ( 'til' ) ;
funksjon myFunction ( ) {
div1. stil . animasjon = 'moveBox 6s' ;
}
div1. addEventListener ( 'animasjonsstart' , startFunction ) ;
div1. addEventListener ( 'animere' , endFunction ) ;
funksjon startFunksjon ( ) {
til. indreHTML = 'Animasjonen har startet...' ;
}
funksjon endFunction ( ) {
til. indreHTML = 'Animasjonen er avsluttet!' ;
til. stil . farge = 'rød' ;
}
manus >
kropp >
html >
Forklaringen av koden ovenfor er som følger:
- I «
'-tagger, elementet med id ' myDIV ” er utstyrt med CSS-egenskaper. - Deretter en ' keyframe 'navngitt' moveBox ” er laget for animasjonsformål. Den har tre overgangstilstander. Den første overgangen vil være fra ' 0 % ' til ' femti% '. Deretter vil neste overgang være fra ' femti% ' til ' 100 % '.
- Deretter, inne i body-taggene, ' h1 ' & ' h3 ' elementer opprettes.
- en ' ' element med id ' til ' er skapt.
- en ' div ' element med id ' myDIV ' er skapt. Også en funksjon kalt ' myFunction() ' er gitt til ' ved trykk ”-attributt til div-elementet.
- Deretter inne i '