[分享]css动画执行完触发js

CSS动画是Web开发的一项重要技术，它让我们可以制作出各种美观、有趣的动画效果。当我们在使用CSS动画的时候，有时候需要在动画执行完毕之后，再做一些JavaScript的处理，这时候我们就需要用到C...

CSS动画是Web开发的一项重要技术，它让我们可以制作出各种美观、有趣的动画效果。当我们在使用CSS动画的时候，有时候需要在动画执行完毕之后，再做一些JavaScript的处理，这时候我们就需要用到CSS动画结束后触发JavaScript的方法。

animation.addEventListener('animationend', function() {
  // 在这里编写 JavaScript 的处理代码
}); 

上面的代码中，我们使用了JavaScript的addEventListener方法来监听CSS动画执行完毕的事件。这里的事件类型是animationend，这个事件会在CSS动画完成后，即动画效果消失之后触发。一旦事件触发，就会执行我们在addEventListener方法中传入的回调函数。这个回调函数中，我们可以编写任何我们需要在动画执行完成后处理的JavaScript代码。

另外，还有一个类似的方法叫做transitionend，它的事件类型是在CSS过渡效果执行完毕后触发的。使用方法和animationend相似，只需要将事件类型改为transitionend即可。需要注意的是，只有在使用CSS进行过渡效果时才会触发，如果是使用JavaScript自己编写的过渡效果，则无法触发这个事件。