Javascript 事件不适用于 Element.animate()

Question

我正在尝试使用 Javascript 中的 Element.animate() 方法向我的网站添加动画，但我意识到当动画为运行时不会触发动画事件。

这是我的代码：

window.onload = function () {
  let list = document.querySelector(".list");
  let btn = document.querySelector(".btn");

  // animation events
  list.addEventListener('animationstart', () => {
    console.log('start')
  });

  list.addEventListener('animationend', () => {
    console.log('end');
  });


  btn.onclick = () => {
    list.animate([
      // keyframes
      { transform: 'translateY(0px)' },
      { transform: 'translateY(-24px)' }
    ], {
      // timing options
      duration: 1000,
      fill: "forwards"
    });
  }

}

在上面的代码中，动画运行但没有触发动画事件。谁能解释为什么这不起作用或告诉我如何解决它？

Answer 1

您没有使用 CSS 动画（由 css 类触发）。 animationstart/end（或transitionstart/end）事件仅在使用CSS定义的动画或-transition时触发。

查看 HTMLElement: animationstart event 中的示例。

您可以直接访问 Animation 实例，而不是 start/end-events：

btn.onclick = () => {
  // animation started
  let animation = list.animate(...);
  animation.onfinish = () => {
    // animation ended
  };
};

Animation.onfinish

Javascript 事件不适用于 Element.animate()

Javascript events not working with Element.animate()

html

javascript

css

animation