动画完成不称为 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>

另一个目前仅受 FireFox 支持的选项是 Animation.finished 承诺：

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>