JS如何判断css3动画结束？

在前端开发中，如果你想通过JavaScript判断一个CSS3动画是否结束，有几种方法可以实现。以下是一些常见的方法：

1. 使用animationend事件

CSS动画结束后，会触发一个名为animationend的事件。你可以监听这个事件来执行某些操作。

var element = document.getElementById('myElement');

element.addEventListener('animationend', function(event) {
  console.log('动画已结束', event);
  // 在这里执行动画结束后需要做的操作
});

2. 使用Promise和setTimeout（不推荐）

如果你知道动画的持续时间，并且不想使用animationend事件，你可以使用Promise和setTimeout来模拟动画的结束。但这种方法不够精确，因为它依赖于JavaScript的计时器，而不是CSS动画的实际结束时间。

var element = document.getElementById('myElement');
var animationDuration = 2000; // 假设动画持续时间为2000毫秒

new Promise(resolve => {
  setTimeout(resolve, animationDuration);
}).then(() => {
  console.log('动画应该已经结束了');
  // 在这里执行动画结束后需要做的操作
});

注意：这种方法不推荐使用，因为它不依赖于实际的动画结束时间，而是依赖于你设置的超时时间。如果动画的实际持续时间发生变化，或者受到其他因素的影响（如浏览器的重绘或其他JavaScript代码的执行），这种方法可能会导致不准确的结果。

3. 使用JavaScript动画库

如果你正在使用像GSAP (GreenSock Animation Platform) 或 anime.js 这样的JavaScript动画库，它们通常会提供自己的方法来检测动画的结束。你可以查阅相应库的文档来了解如何使用这些功能。

总的来说，使用animationend事件是最直接和最可靠的方法来检测CSS3动画的结束。