Denne artikel vil give proceduren til at køre en JavaScript-funktion efter en CSS-animation.
Hvordan kører man JavaScript efter CSS-animation er færdig?
Javascript giver ' animationstart ' & ' animere ” begivenheder, der lader udvikleren køre en Javascript-funktion, når en animation starter eller slutter. Dette gør det virkelig praktisk for udviklerne at udføre enhver handling, efter at animationen er færdig. Syntaksen for at bruge ' animere ” begivenhed er som følger:
{ HTML element } . addEventListener ( 'animere' , Funktionsnavn ) ;
I den ovenfor angivne syntaks er ' animere ” leveres som det første argument til hændelseslytteren, efterfulgt af den funktion, der vil blive udført, når animationen slutter. en ' begivenheds lytter ” i Javascript udløser den funktion, der er givet til den, når en bestemt hændelse sker.
Lad os forstå, hvordan en bruger kan køre en JavaScript-funktion efter en CSS-animation ved hjælp af den ovenfor definerede syntaks. I denne demonstration er en boks animeret til at bevæge sig ned og komme op igen i ' fire ' sekunder. Når animationen er fuldført, vises en besked ved hjælp af en JavaScript-funktion.
< html >
< stil >
#myDIV {
bredde : 150 px ;
højde : 150 px ;
position : i forhold ;
baggrund : lysegrøn ;
}
@keyframes moveBox {
0 % { top : 0px ; }
halvtreds % { top : 200 px ; baggrund : lyserød ; }
100 % { top : 0px ; baggrund : lysegrøn ; }
}
stil >
< legeme >
< h1 > Kørsel af JavaScript efter CSS Animation h1 >
< h3 > Klik på firkanten nedenfor for at starte animationen h3 >
< p id = 'til' > s >
< div id = 'myDIV' onclick = 'myFunction()' > div >
< manuskript >
konst div1 = dokument. getElementById ( 'myDIV' ) ;
konst til = dokument. getElementById ( 'til' ) ;
funktion myFunction ( ) {
vild 1. stil . animation = 'moveBox 6s' ;
}
vild 1. addEventListener ( 'animationstart' , startFunction ) ;
vild 1. addEventListener ( 'animere' , endFunction ) ;
funktion startFunktion ( ) {
til. indreHTML = 'Animationen er startet...' ;
}
funktion endFunction ( ) {
til. indreHTML = 'Animationen er slut!' ;
til. stil . farve = 'rød' ;
}
manuskript >
legeme >
html >
Forklaringen af ovenstående kode er som følger:
- I '
' tags, elementet med id ' myDIV ” er forsynet med CSS-egenskaber. - Dernæst en ' keyframe ' som hedder ' moveBox ” er skabt til animationsformål. Den har tre overgangstilstande. Den første overgang vil være fra ' 0 % ' til ' halvtreds% ”. Derefter vil den næste overgang være fra ' halvtreds% ' til ' 100 % ”.
- Derefter, inde i kropsmærkerne, ' h1 ' & ' h3 ” elementer oprettes.
- en ' ' element med id ' til ” er oprettet.
- en ' div ' element med id ' myDIV ” er oprettet. Også en funktion ved navn ' myFunction() ” gives til ” onclick ” attribut for div-elementet.
- Dernæst inde i '