主页 / coding / 问题 / 79567858
Accepted
AshBoomstick1
Asked: 2025-04-11 09:57:52 +0800 CST

为什么我的 JS 动画没有被我的“animationstart”事件监听器检测到启动？

  • 772

我有一个使用 JS 声明和播放的动画，但是当动画播放时，我的事件监听器不会触发。

这是 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>

我希望动画播放时记录“STARTED”，但什么也没发生。

javascript

1 个回答

  1. Best Answer

    沒有 的animationstart活動Animation。

    你可以做这样的事情

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

    并在动画期间使用循环或异步循环或其他方法来获取Animation实例的各种属性https://drafts.c​​sswg.org/web-animations/#the-animation-interface。

    • 4

相关问题