Cet article fournira la procédure pour exécuter une fonction JavaScript après une animation CSS.
Comment exécuter JavaScript une fois l’animation CSS terminée ?
Javascript fournit le ' animationdébut ' & ' animer 'Événements qui permettent au développeur d'exécuter une fonction Javascript une fois qu'une animation démarre ou se termine. Cela permet aux développeurs d'effectuer n'importe quelle opération une fois l'animation terminée. La syntaxe d'utilisation du ' animer » l'événement est le suivant :
{ HTML élément } . addEventListener ( 'animer' , NomFonction ) ;
Dans la syntaxe fournie ci-dessus, le « animer ' est fourni comme premier argument de l'écouteur d'événement, suivi de la fonction qui sera exécutée une fois l'animation terminée. Un ' écouteur d'événements ' en Javascript déclenche la fonction qui lui est donnée chaque fois qu'un événement spécifique se produit.
Comprenons comment un utilisateur peut exécuter une fonction JavaScript après une animation CSS en utilisant la syntaxe définie ci-dessus. Dans cette démonstration, une boîte est animée pour descendre et remonter en ' quatre » secondes. Une fois l'animation terminée, un message sera affiché à l'aide d'une fonction JavaScript.
< HTML >
< style >
#maDIV {
largeur : 150px ;
hauteur : 150px ;
position : relatif ;
arrière-plan : vert clair ;
}
@keyframes moveBox {
0 % { haut : 0px ; }
cinquante % { haut : 200px ; arrière-plan : rose ; }
100 % { haut : 0px ; arrière-plan : vert clair ; }
}
style >
< corps >
< h1 > Exécuter JavaScript après le CSS Animation h1 >
< h3 > Cliquez sur le carré ci-dessous pour démarrer l'animation h3 >
< identifiant p = 'pour' > p >
< identifiant div = 'ma DIV' sur clic = 'maFonction()' > div >
< scénario >
const div1 = document. getElementById ( 'ma DIV' ) ;
const pour = document. getElementById ( 'pour' ) ;
fonction maFonction ( ) {
div1. style . animation = 'movebox 6s' ;
}
div1. addEventListener ( 'animationstart' , fonction de démarrage ) ;
div1. addEventListener ( 'animer' , finFonction ) ;
fonction startFonction ( ) {
pour. intérieurHTML = 'L'animation a commencé...' ;
}
fonction endFunction ( ) {
pour. intérieurHTML = 'L'animation est terminée !' ;
pour. style . couleur = 'rouge' ;
}
scénario >
corps >
HTML >
L'explication du code ci-dessus est la suivante :
- Dans le '