如果 CSS3 动画当前正在 DOM 元素上运行，请检查 javascript答案

【问题标题】：Check in javascript if a CSS3 animation is currently running on a DOM element如果 CSS3 动画当前正在 DOM 元素上运行，请检查 javascript
【发布时间】：2023-04-05 16:17:01
【问题描述】：

我正在尝试为仪表板页面制作一种模板，当单击仪表板按钮时，会向 DOM 添加一些内容。

我试图对此进行模板化，例如，当有人制作新仪表板时，他可以选择在 CSS 中指定一个动画，该动画应在单击时在每个按钮上运行。如果在按钮上定义了动画，则元素的实际加载应该延迟到动画完成。

现在，如果我实际上在 css 中指定了一个动画，那么一切正常，因为我在动画结束时使用回调来延迟逻辑代码。我的问题是，当没有为元素设置动画时，我无法实现相同的效果。

我想要的是类似的东西：

function buttonClick($button) {
     $button.addClass('activated');
     $button.one('animationend', function() {
         // ... run the logic here
     });

     if (...no animation specified in activated class) {
        // ... run the logic here
     }
}

注意：我在这里使用 jQuery，如果 jQuery 中有特定的方法，那对我来说也可以，但是一个普通的 javascript 方法也可以。我听说过jQuery(":animated") 选择器，但是当我测试它时，它似乎只适用于以jQuery 本身开头的动画，不适用于CSS3。

【问题讨论】：

https://stackoverflow.com/questions/14796936/how-do-you-detect-when-css-animations-start-and-end-with-javascript
也许只是在那些按钮上添加一个“伪动画”，没有得到用户指定的明确动画？它实际上不必做任何事情，并且动画持续时间可能很短-但它会触发animationend，因此您不必编写两个不同分支的代码（并解决您的“检测问题”。）
@CBroe 这确实是一个解决方案，但我一直在寻找一个更清洁、更简洁的解决方案：) 但如果没有其他问题，这也是一个很好的备份。
@Sfili_81 如果一个动画已经在运行，然后我将其更改为另一个动画，animationstart 还会触发吗？

标签： javascript jquery css animation

【解决方案1】：

由于您似乎在动画中使用了animation CSS（假设您使用了animationend 事件），您可以使用getComputedStyle 来验证animation-name CSS 属性的内容。

这是一个带有两个按钮的演示：一个会在点击时触发动画，而另一个则不会：

$("button").click(function () {
    buttonClick($(this));
});

function hasAnimation($button) {
    return getComputedStyle($button[0], null)["animation-name"] != "none";
}

function onEndAnimation($button) {
    $button.removeClass('activated');
    console.log("animation complete on button " + $button.text());
}

function buttonClick($button) {
    $button.addClass('activated');
    $button.one('animationend', () => onEndAnimation($button));
    if (!hasAnimation($button)) onEndAnimation($button);
}

#yes.activated {
    animation-duration: 1s;
    animation-name: grow;
}

@keyframes grow {
  from { width: 50px; }
  50% { width: 100px; }
  to { width: 50px; }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="yes" style="width: 50px">Yes</button><br>
<button id = "no" style="width: 50px">No</button>

【讨论】：