动画完整未调用 JavaScript DOM

Question

I am trying to animate an image with a completion function.
The animation works fine but the complete property is not called.
I tried looking around and didn't find any result on the matter that says that what i'm doing is wrong.
I tried on Chrome and Firefox
I am using the code below

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

Answer 1

Element.animate() returns a Animation object, and you can attach an event handler for finish to the object:

 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>

Another option, which is only supported by FireFox currently, is the Animation.finished 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>