Acest articol va oferi procedura pentru rularea unei funcții JavaScript după o animație CSS.
Cum să rulați JavaScript după ce animația CSS este terminată?
Javascript oferă „ animationstart ” & “ animand ” evenimente care permit dezvoltatorului să ruleze o funcție Javascript odată ce o animație începe sau se termină. Acest lucru face ca dezvoltatorii să efectueze orice operație după ce animația s-a terminat. Sintaxa pentru utilizarea „ animand ” evenimentul este următorul:
{ HTML element } . addEventListener ( 'animare' , FunctionName ) ;
În sintaxa furnizată mai sus, „ animand ” este furnizat ca prim argument pentru ascultătorul de evenimente, urmat de funcția care va fi executată odată ce animația se termină. Un „ ascultător de evenimente ” în Javascript declanșează funcția dată de fiecare dată când are loc un anumit eveniment.
Să înțelegem cum un utilizator poate rula o funcție JavaScript după o animație CSS folosind sintaxa definită mai sus. În această demonstrație, o casetă este animată să se miște în jos și să urce din nou în „ patru ” secunde. După ce animația este finalizată, va fi afișat un mesaj folosind o funcție JavaScript.
< html >
< stil >
#myDIV {
lăţime : 150px ;
înălţime : 150px ;
poziţie : relativ ;
fundal : verde deschis ;
}
@keyframes moveBox {
0 % { top : 0px ; }
cincizeci % { top : 200px ; fundal : roz ; }
100 % { top : 0px ; fundal : verde deschis ; }
}
stil >
< corp >
< h1 > Rularea JavaScript după CSS Animaţie h1 >
< h3 > Faceți clic pe pătratul de mai jos pentru a începe animația h3 >
< p id = 'pentru' > p >
< div id = 'myDIV' onclick = 'funcția mea()' > div >
< scenariu >
const sălbatic1 = document. getElementById ( 'myDIV' ) ;
const pentru = document. getElementById ( 'pentru' ) ;
funcția myFunction ( ) {
sălbatic1. stil . animaţie = „moveBox 6s” ;
}
sălbatic1. addEventListener ( 'animationstart' , startFunction ) ;
sălbatic1. addEventListener ( 'animare' , endFunction ) ;
funcția startFunction ( ) {
pentru. innerHTML = „A început animația...” ;
}
funcția endFunction ( ) {
pentru. innerHTML = „S-a încheiat animația!” ;
pentru. stil . culoare = 'roșu' ;
}
scenariu >
corp >
html >
Explicația codului de mai sus este următoarea:
- În '
” etichete, elementul cu id “ myDIV ” este prevăzut cu proprietăți CSS. - În continuare, un „ cadru cheie ' numit ' moveBox ” este creat în scopuri de animație. Are trei stări de tranziție. Prima tranziție va fi de la „ 0% ' la ' cincizeci% ”. Apoi, următoarea tranziție va fi de la „ cincizeci% ' la ' 100% ”.
- Apoi, în interiorul etichetelor corporale, „ h1 ” & “ h3 ” sunt create elemente.
- A ' „element cu id“ pentru ' este creat.
- A ' div „element cu id-ul „ myDIV ' este creat. De asemenea, o funcție numită „ myFunction() ” este furnizat „ onclick ” atributul elementului div.
- În continuare, în interiorul „