Ez a cikk bemutatja a JavaScript-függvény CSS-animáció utáni futtatásának eljárását.
Hogyan futtassuk a JavaScriptet a CSS-animáció befejezése után?
A Javascript biztosítja a „ animáció indul ' és ' animáló ” események, amelyek lehetővé teszik a fejlesztő számára egy Javascript-függvény futtatását, ha egy animáció elindul vagy véget ér. Ez igazán kényelmessé teszi a fejlesztők számára, hogy bármilyen műveletet elvégezzenek az animáció befejezése után. A szintaxis a „ animáló ” esemény a következő:
{ HTML elem } . addEventListener ( 'animáció' , FunctionName ) ;
A fent megadott szintaxisban a „ animáló ” az eseményfigyelő első argumentumaként, majd az animáció végén végrehajtandó függvény követi. egy ' eseményhallgató ” a Javascriptben minden alkalommal aktiválja a neki adott függvényt, amikor egy adott esemény történik.
Nézzük meg, hogyan tud a felhasználó JavaScript-függvényt futtatni egy CSS-animáció után a fent meghatározott szintaxis használatával. Ebben a bemutatóban egy doboz animált, hogy lefelé mozogjon, és újra feljöjjön a „ négy ” másodperc. Az animáció befejezése után egy JavaScript funkciót használó üzenet jelenik meg.
< html >
< stílus >
#myDIV {
szélesség : 150 képpont ;
magasság : 150 képpont ;
pozíció : relatív ;
háttér : világos zöld ;
}
@keyframes moveBox {
0 % { tetejére : 0px ; }
ötven % { tetejére : 200 képpont ; háttér : rózsaszín ; }
100 % { tetejére : 0px ; háttér : világos zöld ; }
}
stílus >
< test >
< h1 > JavaScript futtatása után CSS Élénkség h1 >
< h3 > Kattintson az alábbi négyzetre az animáció elindításához h3 >
< p id = 'for' > p >
< div id = 'myDIV' kattintásra = 'myFunction()' > div >
< forgatókönyv >
const div1 = dokumentum. getElementById ( 'myDIV' ) ;
const számára = dokumentum. getElementById ( 'for' ) ;
függvény myFunction ( ) {
div1. stílus . élénkség = 'moveBox 6s' ;
}
div1. addEventListener ( 'animációk indítása' , StartFunction ) ;
div1. addEventListener ( 'animáció' , endFunction ) ;
függvény startFunkció ( ) {
számára. innerHTML = 'Elindult az animáció...' ;
}
függvény endFunction ( ) {
számára. innerHTML = 'Az animáció véget ért!' ;
számára. stílus . szín = 'piros' ;
}
forgatókönyv >
test >
html >
A fenti kód magyarázata a következő:
- Ban,-ben '
' címkék, az elem azonosítójával ' myDIV ” CSS-tulajdonságokkal van ellátva. - Ezután egy „ kulcskockát ' nevezett ' moveBox ” animációs célokra készült. Három átmeneti állapota van. Az első átmenet a következőről lesz: 0% ' nak nek ' ötven% ”. Ezután a következő átmenet a következőről lesz: ötven% ' nak nek ' 100% ”.
- Ezután a törzscímkéken belül a „ h1 ' és ' h3 ” elemek jönnek létre.
- egy ' ' elem azonosítóval ' számára ' létrehozva.
- egy ' div ' elem az azonosítóval ' myDIV ' létrehozva. Továbbá egy '' nevű függvény myFunction() ' a ' kattintásra ” div elem attribútuma.
- Ezután a „