JavaScript探测CSS动画是否已经完成的方法

前置知识：

在 JavaScript 中，我们可以使用 addEventListener() 方法给元素添加事件监听器，使用 animationstart、animationiteration 和 animationend 事件来侦测 CSS 动画的开始、循环和结束。

方法一：监听 animationend 事件

当 CSS 动画结束时，会触发元素的 animationend 事件，我们可以通过给元素添加 animationend 事件监听器来检测动画是否结束：

const element = document.querySelector('#animate');
element.addEventListener('animationend', function(event) {
  if(event.animationName === 'fade-out') {
    console.log('CSS animation has completed!');
  }
});

在上面的代码中，我们使用 querySelector() 方法选择了一个 ID 为 animate 的元素，并给它添加了一个 animationend 事件监听器。当此元素的动画结束时，监听器会被触发并打印一条消息到控制台。

在监听器函数中，我们可以使用 event.animationName 属性来获取当前动画的名称，然后根据需要进行业务逻辑处理。

方法二：使用 getComputedStyle() 方法

另一种检测 CSS 动画是否完成的方法是使用 getComputedStyle() 方法获取元素的计算样式。该方法返回一个 CSSStyleDeclaration 对象，包含当前计算样式（由所有设置的样式和默认样式决定）。

我们可以通过获取元素的 animationDuration 和 animationDelay 样式，加上一个 setTimeout 定时器，来判断动画是否已经完成。具体实现如下：

const element = document.querySelector('#animate');
const style = getComputedStyle(element);
const animationDuration = parseFloat(style.animationDuration);
const animationDelay = parseFloat(style.animationDelay);
const seconds = (animationDuration + animationDelay) * 1000;
setTimeout(function() {
  console.log('CSS animation has completed!');
}, seconds);

在上面的代码中，我们首先使用 querySelector() 方法选择了一个 ID 为 animate 的元素，然后通过 getComputedStyle() 方法获取到元素的计算样式。接下来，我们获取了元素的 animationDuration 和 animationDelay 样式，并计算出动画总用时，即 seconds 变量的值。

最后，我们使用 setTimeout 定时器在动画用时 seconds 后打印一条消息到控制台，以便我们了解动画是否已经完成。

总结：

CSS 动画的完成状态可以通过监听 animationend 事件，或者使用 getComputedStyle() 方法加上一个 setTimeout() 定时器来检测。使用这些方法，我们可以精确地判断动画是否已经完成，从而执行相应的业务逻辑。