Aquest article proporcionarà el procediment per executar una funció JavaScript després d'una animació CSS.
Com executar JavaScript després d'haver acabat l'animació CSS?
Javascript proporciona el ' inici de l'animació ” & “ animant ” esdeveniments que permeten al desenvolupador executar una funció Javascript un cop comença o acaba una animació. Això fa que sigui realment convenient que els desenvolupadors realitzin qualsevol operació després que l'animació hagi acabat. La sintaxi per utilitzar el ' animant ”l'esdeveniment és el següent:
{ HTML element } . addEventListener ( 'animant' , NomFunció ) ;
A la sintaxi proporcionada anteriorment, el ' animant ” es proporciona com a primer argument a l'oient d'esdeveniments, seguit de la funció que s'executarà un cop finalitzi l'animació. Un ' oient d'esdeveniments ” en Javascript activa la funció que se li dóna sempre que succeeix un esdeveniment específic.
Entendrem com un usuari pot executar una funció JavaScript després d'una animació CSS utilitzant la sintaxi definida anteriorment. En aquesta demostració, s'anima una caixa per moure's cap avall i tornar a pujar en ' quatre ” segons. Un cop finalitzada l'animació, es mostrarà un missatge mitjançant una funció de JavaScript.
< html >
< estil >
#myDIV {
amplada : 150 píxels ;
alçada : 150 píxels ;
posició : relatiu ;
fons : Verd clar ;
}
@keyframes moveBox {
0 % { superior : 0px ; }
50 % { superior : 200 píxels ; fons : rosa ; }
100 % { superior : 0px ; fons : Verd clar ; }
}
estil >
< cos >
< h1 > Execució de JavaScript després de CSS Animació h1 >
< h3 > Feu clic al quadrat de sota per iniciar l'animació h3 >
< p id = 'per' > pàg >
< id div = 'el meuDIV' fent clic = 'la meva funció()' > div >
< guió >
const div1 = document. getElementById ( 'el meuDIV' ) ;
const per = document. getElementById ( 'per' ) ;
funció myFunction ( ) {
div1. estil . animació = 'moveBox 6s' ;
}
div1. addEventListener ( 'inici de l'animació' , startFunction ) ;
div1. addEventListener ( 'animant' , endFunction ) ;
funció startFunction ( ) {
per. innerHTML = 'L'animació ha començat...' ;
}
funció endFunction ( ) {
per. innerHTML = 'L'animació s'ha acabat!' ;
per. estil . color = 'vermell' ;
}
guió >
cos >
html >
L'explicació del codi anterior és la següent:
- En el '
' etiquetes, l'element amb id ' myDIV ” es proporciona amb propietats CSS. - A continuació, un ' fotograma clau 'anomenat' moveBox ” es crea amb finalitats d'animació. Té tres estats transitoris. La primera transició serà de ' 0% ' a ' 50% ”. Aleshores, la següent transició serà de ' 50% ' a ' 100% ”.
- A continuació, dins de les etiquetes del cos, el ' h1 ” & “ h3 ” es creen elements.
- A ' 'element amb id' per ” es crea.
- A ' div ' element amb l'identificador ' myDIV ” es crea. A més, una funció anomenada ' la meva funció() ' es proporciona a la ' fent clic ” atribut de l'element div.
- A continuació, dins del '