See artikkel pakub protseduuri JavaScripti funktsiooni käivitamiseks pärast CSS-animatsiooni.
Kuidas käivitada JavaScripti pärast CSS-animatsiooni lõppu?
Javascript pakub ' animatsiooni algus ' & ' animeerimine ” sündmused, mis võimaldavad arendajal käivitada Javascripti funktsiooni, kui animatsioon algab või lõpeb. See muudab arendajatel pärast animatsiooni lõppu mis tahes toimingute tegemise väga mugavaks. Süntaks ' animeerimine ” sündmus on järgmine:
{ HTML element } . addEventListener ( 'animeerimine' , Funktsiooni nimi ) ;
Ülaltoodud süntaksis on ' animeerimine ” esitatakse sündmusekuulajale esimese argumendina, millele järgneb funktsioon, mis käivitatakse pärast animatsiooni lõppemist. ' sündmuste kuulaja ” käivitab Javascriptis talle antud funktsiooni alati, kui konkreetne sündmus juhtub.
Mõistame, kuidas kasutaja saab ülalmääratletud süntaksi abil pärast CSS-i animatsiooni käivitada JavaScripti funktsiooni. Selles esitluses animeeritakse kasti, mis liigub alla ja tuleb uuesti üles neli ” sekundit. Pärast animatsiooni lõpetamist kuvatakse JavaScripti funktsiooni abil teade.
< html >
< stiilis >
#minuDIV {
laius : 150 pikslit ;
kõrgus : 150 pikslit ;
positsiooni : sugulane ;
taustal : heleroheline ;
}
@keyframes moveBox {
0 % { üleval : 0 pikslit ; }
viiskümmend % { üleval : 200 pikslit ; taustal : roosa ; }
100 % { üleval : 0 pikslit ; taustal : heleroheline ; }
}
stiilis >
< keha >
< h1 > JavaScripti käivitamine pärast CSS Animatsioon h1 >
< h3 > Animatsiooni käivitamiseks klõpsake ruudu all h3 >
< p id = 'eest' > lk >
< divi id = 'minuDIV' onclick = 'myFunction()' > div >
< stsenaarium >
konst metsik1 = dokument. getElementById ( 'minuDIV' ) ;
konst jaoks = dokument. getElementById ( 'eest' ) ;
funktsioon myFunction ( ) {
div1. stiilis . animatsioon = 'moveBox 6s' ;
}
div1. addEventListener ( 'animatsiooni algus' , startFunktsioon ) ;
div1. addEventListener ( 'animeerimine' , endFunction ) ;
funktsioon startFunktsioon ( ) {
jaoks. sisemine HTML = 'Animatsioon on alanud...' ;
}
funktsioon endFunction ( ) {
jaoks. sisemine HTML = 'Animatsioon on lõppenud!' ;
jaoks. stiilis . värvi = 'punane' ;
}
stsenaarium >
keha >
html >
Ülaltoodud koodi selgitus on järgmine:
- jaotises '
' sildid, element ID-ga ' myDIV ” on varustatud CSS-i atribuutidega. - Järgmiseks ' võtmekaader 'nimega' liigukast ” on loodud animatsiooni eesmärgil. Sellel on kolm üleminekuolekut. Esimene üleminek toimub alates ' 0% ' kuni ' viiskümmend% ”. Seejärel toimub järgmine üleminek viiskümmend% ' kuni ' 100% ”.
- Seejärel kuvatakse kehamärgendite sees „ h1 ' & ' h3 ” elemendid luuakse.
- A ' element ID-ga ' jaoks ” on loodud.
- A ' div element ID-ga ' myDIV ” on loodud. Samuti funktsioon nimega ' myFunction() ” on esitatud „ onclick ” elemendi div atribuut.
- Järgmisena, sees