检查元素是不是有css动画

Posted 2023-05-08

【中文标题】检查元素是不是有css动画

【英文标题】：Check if element has css animation检查元素是否有css动画

【发布时间】：2014-09-08 06:39:11

【问题描述】：

我有一个脚本，当 css3 动画在 jQuery 中触发 AnimationEnd 时删除一个元素。问题是这些动画绑定到了一个可能不包含的外部 css 文件。

现在我称之为。

$element.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(event) 
    $(this).remove();
);

但是如果元素没有动画是因为浏览器不支持它或者动画文件不包含，我仍然需要删除元素。我如何检查它是否被调用。

我已经尝试过了，但它似乎没有将值更改为 true。

var hasAnimation = false;
$element.one('webkitAnimationStart oanimationstart msAnimationStart animationstart', function(event) 
        hasAnimation = true;
);
if (!hasAnimation) 
        $element.remove();

【问题讨论】：

***.com/questions/9736919/…

我发现，问题是我不确定如何将该答案转换为我可以使用的东西。他们的答案是假设动画总是会开始。我正在尝试检查动画是否可以开始。

至少你应该给 javascript 一个触发动画开始的机会......我想如果你把：“如果有动画”放在 setTimeout-function 5ms 中？应该做的伎俩

@halfbit 所以这行得通。我本来希望避免使用setTimeout，但是嘿，必须做你必须做的事情。

我认为 setTimeout(f,0,x) 不是超时，它对我来说更像是一个“ImedaiateReEnqueue(f,x)”函数

【参考方案1】：

你在动画开始之前检查了hasAnimation，因为你没有放弃你的“时间片”。 （这是错误的术语，但我认为“时间片”只是描述了正在发生的事情）

AFAIK no Javascript implementationaion 是-抢占式-多线程，至少不是在脚本级别。所以如果你循环，你循环，没有其他事情发生。

想象一下诸如将函数放入队列之类的事件，这些事件一个接一个地被触发/调用。举止得体。所以如果你想知道这样一个事件的结果是什么，你必须结束你当前的函数（称之为放弃时间片）。现在活动开始了 - 现在是唯一的活动。

因此，如果您将cleanup_if_no_animation( hasAnimation ) 与setTimeout(0) 排在一起，只要StartAnimation 本身没有与setTimeout 一起触发，您就不会真正玩弄时间，您只需放弃，然后在（可选的开始事件）

如果您想计算到 1000 并将其放入 DIV，则与您的情况相同。您必须在步骤之间使用 setTimeout(0) 来更新显示。

喜欢这个example

function bad_loop() 
    for (i = 1; i < 100; ++i) 
        $('#out').text(i)
     

function good_loop(i = 1)  
    $('#out').text(i)
    if (i<50) setTimeout(good_loop,0,i+1)