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

当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
事件

我正在检查
style.animationName
和
self.style.transition
，但它似乎不起作用。我需要一种简单的方法来检查元素或其任何子元素是否应用了CSS动画。
您可以使用
getComputedStyle
函数。下面是一个读取div的
transition
属性的示例

请在此阅读更多有关此的信息。



函数getTheStyle（）{
var elem=document.getElementById（“elem容器”）；
var theCSSprop=window.getComputedStyle（elem，null）.getPropertyValue（“转换”）；
document.getElementById（“输出”）.innerHTML=theCSSprop；
}
getTheStyle（）
#元素容器{
位置：绝对位置；
左：100px；
顶部：200px；
高度：100px；
过渡：所有1；
}

您可以监听和事件


let element=document.getElementById（“square”）；
元素。addEventListener（“animationstart”，函数（事件）{
element.innerHTML=“红色！”
setAttribute（'data-animating'，true）；
}，假）；
元素。addEventListener（“animationend”，函数（事件）{
element.innerHTML=“黄色！”
element.setAttribute（'data-animating'，false）；
}，假）；
设置间隔（（）=>{
console.log（element.getAttribute（'data-animating'））
}，500）
#正方形{
宽度：100px；
高度：100px；
动画名称：动漫；
动画持续时间：4s；
背景色：红色；
动画填充模式：正向；
文本对齐：居中；
垂直对齐：中间对齐；
线高：100px；
}
@关键帧动画{
至{背景色：黄色；}
}
谢谢@Thusitha。我使用了
window.getComputedStyle
以及
动画持续时间
和
过渡持续时间
来确定动画是否存在，因为要播放动画/过渡，其中任何一个都需要大于0

以下检查所有元素，包括传入的元素：


/**
*确定是否应用了任何元素或其子元素的CSS动画
*@param{HTMLElement}el-要检查的元素
*@如果检测到动画/转换，则返回{boolean}true，否则返回false
*/
函数hasCssAnimation（el）{
//获取包括self在内的所有子项的集合
var items=[el].concat（Array.prototype.slice.call（el.getElementsByTagName（“*”））；
//以相反的顺序检查每个项目（更快）
对于（var i=items.length；i--；）{
//获取应用的样式
var style=window.getComputedStyle（项[i]，空）；
//读取动画/过渡持续时间-默认为0
var animDuration=parseFloat（style.getPropertyValue（'animation-duration'）| |“0”）；
var transDuration=parseFloat（style.getPropertyValue（'transition-duration'）| |“0”）；
//如果任何持续时间大于0，则存在动画
如果（animDuration>0 | | transDuration>0）{
返回true；
}
}
返回false；
}
var elementToTest=document.querySelector（'.one'）；
var结果=hasCssAnimation（elementToTest）；
警报（结果）
div{
字体大小：14px；
填充：20px；
颜色：#fff；
}
.一{
背景：红色；
}
.二{
背景：绿色；
动画：缩放3s轻松/*