检查元素是否有css动画

Check if element has css animation

本文关键字：css 动画 是否 元素 检查      更新时间：2023-09-26

我有一个脚本，当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();
}

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

我想没有Javascript实现是-抢占-多线程的，至少不是在脚本级别。所以如果你循环，你就循环，别的什么都不发生。

想象一下将函数放到队列中这样的事件，这些事件一个接一个地被触发/调用。表现好。因此，如果您想知道这样一个事件的结果，您必须结束当前函数(调用它放弃时间片)。现在活动开始了——现在是唯一的一次。

因此，如果您将cleanup_if_no_animation( hasAnimation )与setTimeout(0)排队，那么只要StartAnimation不是由setTimeout本身触发，您就会放弃，并在(可选的开始事件)之后重新开始

同样的情况，如果你想计数到1000并把它放入div中，你必须在步骤之间使用setTimeout(0)来更新显示。

就像下面这个例子

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) }
相关文章：