Šiame straipsnyje bus pateikta „JavaScript“ funkcijos paleidimo procedūra po CSS animacijos.
Kaip paleisti „JavaScript“ baigus CSS animaciją?
„Javascript“ pateikia „ animacijos pradžia “ ir “ animacinis “ įvykiai, leidžiantys kūrėjui paleisti „Javascript“ funkciją, kai animacija prasideda arba baigiasi. Dėl to kūrėjams tikrai patogu atlikti bet kokią operaciją pasibaigus animacijai. „“ naudojimo sintaksė animacinis “ renginys yra toks:
{ HTML elementas } . addEventListener ( 'animuoti' , Funkcijos pavadinimas ) ;
Aukščiau pateiktoje sintaksėje „ animacinis “ pateikiamas kaip pirmasis argumentas įvykių klausytojui, po kurio seka funkcija, kuri bus vykdoma pasibaigus animacijai. „ renginio klausytoja “ Javascript suaktyvina jai suteiktą funkciją, kai įvyksta konkretus įvykis.
Supraskime, kaip vartotojas gali paleisti JavaScript funkciją po CSS animacijos, naudodamas aukščiau apibrėžtą sintaksę. Šioje demonstracijoje dėžutė yra animuota, kad judėtų žemyn ir vėl pakiltų „ keturi “ sekundes. Kai animacija bus baigta, bus rodomas pranešimas naudojant JavaScript funkciją.
< html >
< stilius >
#manoDIV {
plotis : 150 piks ;
aukščio : 150 piks ;
padėtis : giminaitis ;
fone : šviesiai žalia ;
}
@keyframes moveBox {
0 % { viršuje : 0px ; }
penkiasdešimt % { viršuje : 200 piks ; fone : rožinis ; }
100 % { viršuje : 0px ; fone : šviesiai žalia ; }
}
stilius >
< kūnas >
< h1 > „JavaScript“ paleidimas po CSS Animacija h1 >
< h3 > Spustelėkite žemiau esantį kvadratą, kad pradėtumėte animaciją h3 >
< p id = 'dėl' > p >
< dal id = 'mano DIV' paspaudus = 'myFunction()' > div >
< scenarijus >
konst div1 = dokumentas. getElementById ( 'mano DIV' ) ;
konst dėl = dokumentas. getElementById ( 'dėl' ) ;
funkcija myFunction ( ) {
div1. stilius . animacija = „moveBox 6s“ ;
}
div1. addEventListener ( 'animacijos pradžia' , startFunkcija ) ;
div1. addEventListener ( 'animuoti' , endFunction ) ;
funkcija startFunction ( ) {
dėl. vidinis HTML = „Animacija prasidėjo...“ ;
}
funkcija endFunction ( ) {
dėl. vidinis HTML = 'Animacija baigėsi!' ;
dėl. stilius . spalva = 'raudona' ;
}
scenarijus >
kūnas >
html >
Aukščiau pateikto kodo paaiškinimas yra toks:
- Viduje '
' žymos, elementas su ID ' manoDIV “ yra su CSS savybėmis. - Toliau „ raktinis kadras ' pavadintas ' MoveBox “ yra sukurta animacijos tikslais. Jis turi tris pereinamąsias būsenas. Pirmasis perėjimas bus iš „ 0 % 'į' penkiasdešimt % “. Tada kitas perėjimas bus iš „ penkiasdešimt % 'į' 100 % “.
- Tada kūno žymų viduje „ h1 “ ir „ h3 “ sukuriami elementai.
- A “ 'elementas su ID' dėl “ yra sukurtas.
- A “ div 'elementas su ID' manoDIV “ yra sukurtas. Taip pat funkcija, pavadinta „ myFunction() “ pateikiama „ paspaudus “ div elemento atributas.
- Toliau, viduje „