Tässä artikkelissa kerrotaan, miten JavaScript-toiminto suoritetaan CSS-animoinnin jälkeen.
Kuinka suorittaa JavaScript, kun CSS-animaatio on valmis?
Javascript tarjoaa ' animaatioiden aloitus ' & ' animointi ” tapahtumia, jotka antavat kehittäjän suorittaa Javascript-toiminnon animaation alkaessa tai päättyessä. Tämän ansiosta kehittäjien on todella kätevää suorittaa mitä tahansa toimintoja animaation päätyttyä. Syntaksi ' animointi ”tapahtuma on seuraava:
{ HTML elementti } . addEventListener ( 'animoiva' , FunctionName ) ;
Yllä annetussa syntaksissa ' animointi ” annetaan ensimmäisenä argumenttina tapahtumakuuntelijalle, jota seuraa toiminto, joka suoritetaan animaation päätyttyä. ' tapahtuman kuuntelija ” Javascriptissä käynnistää sille annetun toiminnon aina, kun tietty tapahtuma tapahtuu.
Ymmärretään, kuinka käyttäjä voi suorittaa JavaScript-funktion CSS-animoinnin jälkeen käyttämällä yllä määriteltyä syntaksia. Tässä esittelyssä laatikko on animoitu liikkumaan alas ja nousemaan uudelleen ylös ' neljä ”sekuntia. Kun animaatio on valmis, näyttöön tulee JavaScript-toimintoa käyttävä viesti.
< html >
< tyyli >
#myDIV {
leveys : 150 pikseliä ;
korkeus : 150 pikseliä ;
asema : suhteellinen ;
tausta : vaaleanvihreä ;
}
@keyframes moveBox {
0 % { alkuun : 0px ; }
viisikymmentä % { alkuun : 200 pikseliä ; tausta : vaaleanpunainen ; }
100 % { alkuun : 0px ; tausta : vaaleanvihreä ; }
}
tyyli >
< kehon >
< h1 > JavaScriptin suorittaminen jälkeen CSS Animaatio h1 >
< h3 > Aloita animaatio napsauttamalla alapuolella olevaa neliötä h3 >
< p id = 'for' > s >
< div id = 'myDIV' klikkaamalla = 'myFunction()' > div >
< käsikirjoitus >
konst div1 = asiakirja. getElementById ( 'myDIV' ) ;
konst varten = asiakirja. getElementById ( 'for' ) ;
toiminto myFunction ( ) {
div1. tyyli . animaatio = 'moveBox 6s' ;
}
div1. addEventListener ( 'animaatioaloitus' , StartFunction ) ;
div1. addEventListener ( 'animoiva' , endFunction ) ;
toiminnon aloitustoiminto ( ) {
varten. innerHTML = 'Animaatio on alkanut...' ;
}
funktio endFunction ( ) {
varten. innerHTML = 'Animaatio on päättynyt!' ;
varten. tyyli . väri = 'punainen' ;
}
käsikirjoitus >
kehon >
html >
Yllä olevan koodin selitys on seuraava:
- '
' -tunnisteet, elementti tunnuksella ' myDIV ” on varustettu CSS-ominaisuuksilla. - Seuraavaksi ' avainkehys ”nimeltään” MoveBox ” on luotu animaatiotarkoituksiin. Sillä on kolme siirtymätilaa. Ensimmäinen siirtymä tapahtuu ' 0 % ”–” viisikymmentä% ”. Sitten seuraava siirtymä tapahtuu ' viisikymmentä% ”–” 100 % ”.
- Sitten body-tunnisteiden sisällä ' h1 ' & ' h3 ”elementtejä luodaan.
- A ' ' elementti tunnuksella ' varten ' on luotu.
- A ' div ' elementti tunnuksella ' myDIV ' on luotu. Myös toiminto nimeltä ' myFunction() ' toimitetaan ' klikkaamalla ” div-elementin attribuutti.
- Seuraavaksi '