0
295
VistasUsando JS, ¿cómo puedo obtener el valor final de la animación en la línea de tiempo de los documentos?
Tengo un documento con varias animaciones CSS y necesito obtener la longitud total de ejecución que se puede ver en las herramientas de desarrollo de Chrome (línea de tiempo de animaciones) según la captura de pantalla
He pensado en algunas formas, pero no estoy seguro de cuál es 1. la más precisa y 2. la más eficiente
PD: las clases de animación CSS se agregan dinámicamente al cargar, por lo que a veces puede ser más largo y otras veces más corto
Para su información, he considerado usar JS document.getAnimations() para obtener una matriz, pero no estoy seguro de adónde ir desde allí, ya que todos tienen algo similar:
formación:
hora de inicio y hora actual
valor total final:
1 Respuestas
Responde la pregunta0
Creo que puedes obtener esto usando una combinación de los eventos animationstart y animationend . Aquí hay una versión modificada del ejemplo de MDN , aquí usando dos elementos diferentes en los que comenzamos la animación en momentos aleatorios:
const activeElements = new Map(); function handleAnimationStart({target}) { const now = Date.now(); console.log(`Started on ${target.getAttribute("data-label")} at ${now}`); activeElements.set(target, now); } function handleAnimationEnd({target}) { const now = Date.now(); const start = activeElements.get(target); if (typeof start === "number") { activeElements.delete(target); console.log(`Ended on ${target.getAttribute("data-label")} at ${now}, duration = ${now - start}`); } } function startAnimation(element) { element.classList.toggle("active"); element.addEventListener("animationstart", handleAnimationStart); element.addEventListener("animationend", handleAnimationEnd); } const elements = document.querySelectorAll("p.animation"); setTimeout(() => { startAnimation(elements[0]); }, Math.floor(Math.random() * 1000)); setTimeout(() => { startAnimation(elements[1]); }, Math.floor(Math.random() * 2000)); .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: 0.2rem; padding: 0.2rem; } .animation.active { animation-duration: 2s; animation-name: slidein; } @keyframes slidein { from { transform: translateX(100%) scaleX(3); } to { transform: translateX(0) scaleX(1); } } <div class="animation-example"> <div class="container"> <p class="animation" data-label="0">You chose a cold night to visit our planet.</p> </div> <div class="container"> <p class="animation" data-label="1">You chose a cold night to visit our planet.</p> </div> </div>