javascript - 检测元素是否应用了 CSS 动画的最佳方法是什么

Question

我正在尝试在 web component 上触发一个事件当 CSS 动画完成时，用户可能会使用 animation: none; 清除元素中的动画。意思是 transitionend事件永远不会触发:

// wait for dialog close animation to end before firing closed event
element.addEventListener('transitionend', function() {

    // fire dialog closed event
    self.dispatchEvent(new CustomEvent('pure-dialog-closed', { 
        bubbles: true, 
        cancelable: true 
    }));
});

为了确保我的自定义事件始终触发，我需要确定该元素或其任何子元素是否应用了动画，如果没有，则触发 pure-dialog-closed立即事件。

我有tried检查 style.animationName和 self.style.transition但它似乎没有用。我需要一种简单的方法来检查元素或其任何子元素是否应用了 CSS 动画。

Answer 1

您可以使用 getComputedStyle 函数。以下是读取 div 的 transition 属性的示例。

在这里阅读更多相关信息。
https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

function getTheStyle() {
  var elem = document.getElementById("elem-container");
  var theCSSprop = window.getComputedStyle(elem, null).getPropertyValue("transition");
  document.getElementById("output").innerHTML = theCSSprop;
}

getTheStyle();

#elem-container {
  position: absolute;
  left: 100px;
  top: 200px;
  height: 100px;
  transition: all 1s;
}

<div id="elem-container"></div>
<div id="output"></div>