javascript - 动画完成不称为 JavaScript DOM

Question

我正在尝试使用补全功能对图像进行动画处理。
动画工作正常，但未调用完整属性。
我尝试环顾四周，但没有找到任何表明我所做的事情是错误的结果。
我尝试过 Chrome 和 Firefox
我使用下面的代码

document.getElementById("myImageId").animate([{
      transform: 'translateY(0px)'
   },
   {
      transform: 'translateY(-300px)'
   }
], {
   duration: 300,
   complete: function () {
      alert('end ani')
   }
});

Answer 1

Element.animate()返回 Animation对象，并且您可以将 finish 的事件处理程序附加到该对象:

var animation = document.querySelector('#myImageId').animate([{
    transform: 'translateY(0px)'
  },
  {
    transform: 'translateY(-300px)'
  }
], {
  duration: 300,
  delay: 300,
  fill: 'forwards',
});

animation.addEventListener('finish', () => alert('end ani'));

<div id="myImageId"><img src="https://picsum.photos/200"></div>

另一个选项是Animation.finished，目前仅FireFox 支持。 promise :

var animation = document.querySelector('#myImageId').animate([{
    transform: 'translateY(0px)'
  },
  {
    transform: 'translateY(-300px)'
  }
], {
  duration: 300,
  delay: 300,
  fill: 'forwards',
});

animation.finished.then(() => alert('end ani'));

<div id="myImageId"><img src="https://picsum.photos/200"></div>