不使用Element.animate()的Javascript事件

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类触发)。只有在使用CSS定义的动画或-transition时，动画启动/结束(或过渡开始/结束)事件才会被触发。

看看HTMLElement: animationstart event上的示例。

您可以直接访问Animation-instance，而不是开始/结束事件：

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

• Animation.onfinish