时间戳

首页 > 解决方案 > Javascript 事件不适用于 Element.animate()

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

问题描述

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

这是我的代码：

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"
    });
  }

}

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

标签： javascripthtmlcssanimation

解决方案

您没有使用 CSS 动画（由 css 类触发）。只有在使用 CSS 定义的动画或 -transition 时才会触发动画开始/结束（或过渡开始/结束）事件。

看一下示例HTMLElement: animationstart event。

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

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

推荐阅读