Tabla de contenido
1. inicio de animación: se activa cuando la animación CSS comienza a reproducirse.
2. final de animación: se activa cuando se completa la animación CSS.
3. iteración de animación: se activa cuando una animación CSS se reproduce repetidamente.
4. Inicio de transición: se activa cuando comienza la transición de CSS.
5. Final de transición: se activa cuando se completa la transición de CSS.
6. transicióncancel: se activa cuando se cancela la transición CSS.
JavaScript proporciona algunos eventos relacionados con la animación que se pueden utilizar para controlar y monitorear el proceso de ejecución de la animación. A continuación se muestran algunos eventos de animación de JavaScript comunes:
1. inicio de animación: se activa cuando la animación CSS comienza a reproducirse.
El evento de animación Animationstart se activa cuando la animación CSS comienza a reproducirse y puede usarse para realizar algunas operaciones de inicialización o agregar efectos adicionales. A continuación se muestra un ejemplo sencillo que demuestra cómo utilizar el evento de inicio de animación:
<!DOCTYPE html>
<html>
<head>
<title>Animation Start Event Example</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 0;
top: 0;
animation: slide-in 2s;
}
@keyframes slide-in {
0% {
left: -100px;
}
100% {
left: 200px;
}
}
</style>
<script>
var box = document.querySelector('.box');
box.addEventListener('animationstart', function() {
// 在动画开始时执行的操作
console.log('Animation started!');
});
</script>
</head>
<body>
<div class="box"></div>
</body>
</html>
En el ejemplo anterior, definimos una animación CSS llamada diapositiva que mueve un elemento de izquierda a derecha. Cuando la animación comience a reproducirse, se activará el evento de inicio de animación y la función de devolución de llamada imprimirá un mensaje "¡Animación iniciada!" en la consola.
2. final de animación: se activa cuando se completa la animación CSS.
El evento de animación animaciónend se activa cuando se completa la animación CSS y puede usarse para realizar algunas operaciones o manejar la lógica posterior después de que finaliza la animación. A continuación se muestra un ejemplo sencillo que demuestra cómo utilizar el evento de fin de animación:
<!DOCTYPE html>
<html>
<head>
<title>Animation End Event Example</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 0;
top: 0;
animation: slide-in 2s;
}
@keyframes slide-in {
0% {
left: -100px;
}
100% {
left: 200px;
}
}
</style>
<script>
var box = document.querySelector('.box');
box.addEventListener('animationend', function() {
// 在动画结束时执行的操作
console.log('Animation ended!');
// 可以在这里添加后续的逻辑处理
});
</script>
</head>
<body>
<div class="box"></div>
</body>
</html>
En el ejemplo anterior, definimos una animación CSS llamada diapositiva que mueve un elemento de izquierda a derecha. Cuando se complete la animación, se activará el evento de finalización de la animación y la función de devolución de llamada imprimirá un mensaje "¡La animación finalizó!" en la consola.
Al usarlo, puede realizar las operaciones apropiadas en la función de devolución de llamada del evento de finalización de animación de acuerdo con necesidades específicas, como cambiar el estilo del elemento, agregar efectos de animación posteriores, etc. Esto le permite realizar algunas operaciones una vez finalizada la animación para lograr interacciones más ricas o manejar la lógica posterior.
3. iteración de animación: se activa cuando una animación CSS se reproduce repetidamente.
El evento de animación animación iteración se activa cada vez que una animación CSS se reproduce repetidamente y se puede utilizar para escuchar el bucle de la animación y realizar las operaciones correspondientes. A continuación se muestra un ejemplo sencillo que demuestra cómo utilizar el evento AnimationIteration:
<!DOCTYPE html>
<html>
<head>
<title>Animation Iteration Event Example</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 0;
top: 0;
animation: rotate 2s infinite;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<script>
var box = document.querySelector('.box');
box.addEventListener('animationiteration', function() {
// 在动画每次循环时执行的操作
console.log('Animation iteration!');
// 可以在这里添加相应的操作或逻辑
});
</script>
</head>
<body>
<div class="box"></div>
</body>
</html>
En el ejemplo anterior, definimos una animación CSS llamada rotar que rota el elemento 360 grados en el sentido de las agujas del reloj alrededor del punto central. Al establecer infinito como el valor de la propiedad de recuento de iteraciones de animación de la animación, la animación se repite infinitamente. Cada vez que la animación se repite, se activará el evento de iteración de animación y la función de devolución de llamada imprimirá un mensaje "¡Iteración de animación!" en la consola.
Puede realizar las operaciones apropiadas en la función de devolución de llamada del evento de iteración de animación según las necesidades específicas, como cambiar el estilo del elemento, agregar otros efectos de animación, etc. Esto le permite realizar las operaciones correspondientes cada vez que la animación se repite, logrando un efecto más flexible y dinámico.
4. Inicio de transición: se activa cuando comienza la transición de CSS.
El evento de animación Transitionstart se activa cuando comienza la transición CSS y se puede utilizar para escuchar el inicio de la transición y realizar las operaciones correspondientes. A continuación se muestra un ejemplo sencillo que demuestra cómo utilizar el evento de inicio de transición:
<!DOCTYPE html>
<html>
<head>
<title>Transition Start Event Example</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
transition: width 2s;
}
</style>
<script>
var box = document.querySelector('.box');
box.addEventListener('transitionstart', function() {
// 过渡开始时执行的操作
console.log('Transition started!');
// 可以在这里添加相应的操作或逻辑
});
</script>
</head>
<body>
<div class="box"></div>
</body>
</html>
En el ejemplo anterior, definimos un elemento .box que desencadena un efecto de transición cuando cambia su ancho. Establezca el tiempo de transición del cambio de ancho en 2 segundos estableciendo la propiedad de transición en ancho 2 segundos. Cuando comience la transición, se activará el evento de inicio de transición y la función de devolución de llamada imprimirá un mensaje "¡Transición iniciada!" en la consola.
Puede realizar las operaciones apropiadas en la función de devolución de llamada del evento de inicio de transición según las necesidades específicas, como cambiar el estilo del elemento, agregar otros efectos de animación, etc. Esto permite realizar acciones al inicio de la transición, lo que permite un efecto más flexible y dinámico.
5. Final de transición: se activa cuando se completa la transición de CSS.
El evento de animación transición final se activa cuando finaliza la transición CSS y puede usarse para monitorear la finalización de la transición y realizar las operaciones correspondientes. A continuación se muestra un ejemplo sencillo que demuestra cómo utilizar el evento de finalización de transición:
<!DOCTYPE html>
<html>
<head>
<title>Transition End Event Example</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
transition: width 2s;
}
</style>
<script>
var box = document.querySelector('.box');
box.addEventListener('transitionend', function() {
// 过渡结束时执行的操作
console.log('Transition ended!');
// 可以在这里添加相应的操作或逻辑
});
function changeWidth() {
box.style.width = '200px';
}
</script>
</head>
<body>
<div class="box"></div>
<button onclick="changeWidth()">Change Width</button>
</body>
</html>
En el ejemplo anterior, definimos un elemento .box que cambia su ancho cuando se hace clic en el botón. Establezca el tiempo de transición del cambio de ancho en 2 segundos estableciendo la propiedad de transición en ancho 2 segundos. Cuando finalice la transición, se activará el evento de finalización de transición y la función de devolución de llamada imprimirá un mensaje "¡Transición finalizada!" en la consola.
Al hacer clic en el botón "Cambiar ancho" en la página se activará la función changeWidth() para cambiar el ancho del elemento .box del valor inicial de 100px a 200px. Luego, el efecto de transición comenzará y finalizará después de 2 segundos. Cuando finalice la transición, se activará el evento de fin de transición y la función de devolución de llamada imprimirá el mensaje correspondiente en la consola.
Puede realizar las operaciones apropiadas en la función de devolución de llamada del evento de finalización de transición según las necesidades específicas, como agregar otros efectos de animación, cambiar el estilo de los elementos, etc. Esto permite realizar las acciones correspondientes cuando se completa la transición, lo que da como resultado un efecto más flexible y dinámico.
6. transicióncancel: se activa cuando se cancela la transición CSS.
El evento de animación TransitionCancel se activa cuando se cancela una transición CSS y se puede utilizar para monitorear la situación cuando se suspende la transición y realizar las operaciones correspondientes. He aquí un ejemplo sencillo:
<!DOCTYPE html>
<html>
<head>
<title>Transition Cancel Event Example</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
transition: width 2s;
}
</style>
<script>
var box = document.querySelector('.box');
box.addEventListener('transitioncancel', function() {
// 过渡被取消时执行的操作
console.log('Transition cancelled!');
// 可以在这里添加相应的操作或逻辑
});
function cancelTransition() {
box.style.transition = 'none';
}
function startTransition() {
box.style.transition = 'width 2s';
box.style.width = '200px';
}
</script>
</head>
<body>
<div class="box"></div>
<button onclick="cancelTransition()">Cancel Transition</button>
<button onclick="startTransition()">Start Transition</button>
</body>
</html>
En el ejemplo anterior, definimos un elemento .box y configuramos un efecto de transición con un ancho cambiante. Establezca el tiempo de transición del cambio de ancho en 2 segundos estableciendo la propiedad de transición en ancho 2 segundos. Cuando se llama a la función startTransition(), el ancho del elemento .box cambiará del valor inicial de 100px a 200px y comenzará el efecto de transición.
También definimos un botón "Cancelar transición", que al hacer clic llamará a la función cancelarTransition(). Esta función cancelará el efecto de transición del elemento .box y cancelará la transición estableciendo el atributo de transición en ninguno.
Cuando se cancela la transición, se activará el evento de cancelación de transición y la función de devolución de llamada imprimirá un mensaje "¡Transición cancelada!" en la consola.
Puede realizar las operaciones apropiadas en la función de devolución de llamada del evento de cancelación de transición de acuerdo con las necesidades específicas, como retroceder al estado inicial, modificar el estilo del elemento, etc. Esto permite realizar acciones apropiadas cuando se aborta la transición, lo que resulta en un efecto más flexible y controlable.