Início / coding / Perguntas / 79567858
Accepted
AshBoomstick1
Asked: 2025-04-11 09:57:52 +0800 CST

Por que minha animação JS não está sendo detectada como iniciada pelo meu ouvinte de evento 'animationstart'?

  • 772

Tenho uma animação que estou declarando e reproduzindo usando JS, mas quando a animação é reproduzida, meu ouvinte de eventos não dispara.

Aqui está o arquivo HTML:

let anim = document.getElementById("anim");

const animkeyFrames = new KeyframeEffect(
  anim,
  [{
      transform: `translate3d(0px, 0px, 0px)`
    }, // keyframe
    {
      transform: `translate3d(0px, ${200}px, 0px)`
    },
  ], {
    // keyframe options
    duration: 1000,
    iterations: "1",
  },
);
let animation = new Animation(animkeyFrames, document.timeline);

anim.addEventListener('animationstart', () => {
  console.log("STARTED");
})

animation.play();
#anim {
  top: 10px;
  left: 10px;
  width: 100px;
  height: 100px;
  background-color: black;
  position: absolute;
}
<div id="anim"></div>

Quero que "STARTED" seja registrado quando a animação for reproduzida, mas nada acontecer.

javascript

1 respostas

  1. Best Answer

    Não há animationstartevento para Animation.

    Você pode fazer algo assim

    animation.finished.then(() => console.log("Animation finished"));
animation.play();
console.log(animation.playState);

    e durante a animação use um loop ou um loop assíncrono ou algum outro meio para obter várias propriedades da Animationinstância https://drafts.csswg.org/web-animations/#the-animation-interface .

    • 4

relate perguntas