Estoy usando transition: opacity 5s; propiedad. Quiero mostrar un mensaje de alerta o consola diferente cuando mi valor de opacity es 0.4 o 0.6 o .2 . Al hacer clic en el botón, estoy haciendo una transición, pero quiero saber el progreso de la opacidad para mostrar esos mensajes.
hay alguna manera de hacer esto
var btn = document.querySelector("button"); var par = document.querySelector("#parId"); btn.addEventListener("click", (e) => { par.classList.add("removed"); }); par.addEventListener("transitionend", () => { par.remove(); }); #parId { transition: opacity 5s; } .removed { opacity: 0; } Estamos recibiendo una devolución de llamada final de transitionend si hay alguna devolución de llamada de progreso donde verificaré el valor de opacidad.
Potencialmente, podría verificar periódicamente de esta manera, aunque su intervalo deberá ser al menos la velocidad de la animación de opacidad o ser más rápido para capturar los valores.
var par = document.querySelector("#parId"); setInterval(function() { console.log(window.getComputedStyle(par).opacity); }, 100) #parId{ opacity: 0.2; transition: opacity 3s ease-in-out; } #parId:hover { opacity: 1; } <div id="parId"> test </div>No hay ningún evento que se pueda escuchar para dar lo que desea, a menos que vaya a utilizar una transición lineal. En ese caso, puede tallar sus cambios de opacidad en ranuras de 0,2 s, cambiando la opacidad en el final de transición al siguiente valor hacia abajo: 0,8, 0,6, etc.
Sin embargo, su código toma el valor predeterminado para la propiedad de la función de tiempo de transición, que es fácil, no lineal, por lo que el final de transición no le sirve de nada.
Este fragmento sondea los cambios de opacidad cada décima de segundo y escribe la opacidad actual en la consola para que pueda ver lo que está sucediendo.
Un par de puntos: tendrá que comprobar cuándo la opacidad es inferior a uno de sus puntos de quiebre, es poco probable que lo alcance exactamente a 0,6 s o lo que sea; Observe también que se sigue escribiendo en la consola después de que el elemento haya desaparecido por completo. El momento no será exacto, las cosas están sucediendo de forma asíncrona.
<style> #parId { transition: opacity 5s; width: 50vw; height: 50vh; background: blue; opacity: 1; display: inline-block; } .removed { opacity: 0; } </style> <div id="parId"></div> <button>Click me</div> <script> var btn = document.querySelector("button"); var par = document.querySelector("#parId"); btn.addEventListener("click", (e) => { let interval = setInterval(function () { const opacity = window.getComputedStyle(par).opacity console.log(opacity); if (opacity == 0) {clearInterval(interval);} }, 100); par.style.opacity = 0; }); </script>Eche un vistazo a este ejemplo https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationend_event
Puede definir sus etapas de animación como diferentes animaciones en css y luego llamarlas en cadena a través de javascript. Antes, debe configurar un detector de eventos para el evento animationend, y cada vez que se activa el evento, verifica la opacidad #parId. Podrías hacerlo con jQuery, totalmente en javascript