Este artículo proporcionará el procedimiento para ejecutar una función de JavaScript después de una animación CSS.
¿Cómo ejecutar JavaScript una vez finalizada la animación CSS?
Javascript proporciona el ' inicio de animación ” & “ animando ”eventos que permiten al desarrollador ejecutar una función de Javascript una vez que comienza o finaliza una animación. Esto hace que sea realmente conveniente para los desarrolladores realizar cualquier operación una vez finalizada la animación. La sintaxis para usar ' animando El evento es el siguiente:
{ HTML elemento } . agregarEventListener ( 'animando' , Nombre de la función ) ;
En la sintaxis proporcionada anteriormente, el ' animando ”se proporciona como primer argumento para el detector de eventos, seguido de la función que se ejecutará una vez que finalice la animación. Un ' oyente de eventos ”en Javascript activa la función que se le asigna cada vez que ocurre un evento específico.
Entendamos cómo un usuario puede ejecutar una función de JavaScript después de una animación CSS usando la sintaxis definida anteriormente. En esta demostración, se anima una caja para que baje y vuelva a subir en “ cuatro ' segundos. Una vez completada la animación, se mostrará un mensaje utilizando una función de JavaScript.
< HTML >
< estilo >
#miDIV {
ancho : 150px ;
altura : 150px ;
posición : relativo ;
fondo : verde claro ;
}
@keyframes moverBox {
0 % { arriba : 0px ; }
50 % { arriba : 200px ; fondo : rosa ; }
100 % { arriba : 0px ; fondo : verde claro ; }
}
estilo >
< cuerpo >
< h1 > Ejecutar JavaScript después del CSS Animación h1 >
< h3 > Haga clic en el cuadrado de abajo para iniciar la animación. h3 >
< identificación p = 'para' > pag >
< identificación div = 'miDIV' al hacer clic = 'miFunción()' > div >
< guion >
constante div1 = documento. obtenerElementoPorId ( 'miDIV' ) ;
constante para = documento. obtenerElementoPorId ( 'para' ) ;
función miFunción ( ) {
div1. estilo . animación = 'movBox6s' ;
}
div1. agregarEventListener ( 'inicio de animación' , función de inicio ) ;
div1. agregarEventListener ( 'animando' , función final ) ;
función de inicioFunción ( ) {
para. HTML interno = 'La animación ha comenzado...' ;
}
función finalFunción ( ) {
para. HTML interno = '¡La animación ha terminado!' ;
para. estilo . color = 'rojo' ;
}
guion >
cuerpo >
HTML >
La explicación del código anterior es la siguiente:
- En el '
'etiquetas, el elemento con id' miDIV ”se proporciona con propiedades CSS. - A continuación, un “ fotograma clave ' llamado ' moverBox ”se crea con fines de animación. Tiene tres estados de transición. La primera transición será de “ 0% ' a ' 50% ”. Entonces, la próxima transición será de “ 50% ' a ' 100% ”.
- Luego, dentro de las etiquetas del cuerpo, el ' h1 ” & “ h3 Se crean elementos.
- A ' 'elemento con id' para ' es creado.
- A ' div 'elemento con el id' miDIV ' es creado. Además, una función llamada “ miFunción() ' se proporciona al ' al hacer clic ”Atributo del elemento div.
- A continuación, dentro del “
”, se crean dos constantes. Estas constantes apuntan hacia los elementos HTML usando el ' .getElementByID() ' método. - Una función llamada “ miFunción() ' es creado. Esta función animará el “ miDIV 'elemento usando el' moverBox ”fotogramas clave.
- A continuación, se crean dos detectores de eventos que llaman a las funciones especificadas en el archivo ' inicio de animación 'evento y el' animando ' evento.
- Luego, se definen dos funciones para los eventos mencionados anteriormente.
Producción:
Se puede ver en el siguiente resultado cuando el usuario hace clic en el cuadro y comienza la animación. En el proceso de animación, el cuadro cambia, se mueve 200 px hacia abajo y vuelve a su lugar original. Durante el movimiento, su color también cambia de verde a rosa y luego nuevamente a verde. A continuación, el mensaje “ ¡La animación ha terminado! ”se muestra usando una función de Javascript que se ejecuta una vez finalizada la animación CSS.
Se trata de ejecutar una función de JavaScript después de finalizar la animación CSS.
Conclusión
Para ejecutar una función de JavaScript una vez finalizada una animación CSS, el usuario puede utilizar un detector de eventos. Para ello, el usuario debe proporcionar el “ animando ”evento como primer argumento y una función como segundo argumento para el detector de eventos. La función especificada se ejecutará una vez finalizada la animación. Este artículo proporciona el procedimiento para ejecutar una función de Javascript después de una animación CSS.