javascript - 检查元素是否有CSS动画

Question

我有一个脚本，当 css3 动画在 jQuery 中触发 AnimationEnd 时，它会删除一个元素。问题是这些动画绑定(bind)到可能不包含的外部 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();
}

Answer 1

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

据我所知，没有 Javascript 实现是 - 抢先式 - 多线程，至少不是在脚本级别。所以如果你循环，你循环，没有其他事情发生。

想象一下像将函数放入队列这样的事件，这些事件一个接一个地被触发/调用。乖乖的。所以如果你想知道这样一个事件的结果是什么，你必须结束你当前的功能(称之为放弃时间片)。现在事件开始了 - 现在是唯一的一次。

因此，如果您使用 setTimeout(0) 将您的 cleanup_if_no_animation( hasAnimation ) 排入队列，那么只要 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) }