Check if element has css animation

Question

I have a script that removes an element when a css3 animation triggers AnimationEnd in jQuery. The problem is that these animations are bound to an external css file that may not be included.

Right now I call this.

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

But if the element does not have the animation because either the browser didn't support it or the animation file was not included I still need to remove the element. How can I check if this was called.

I have tried this, but it doesn't seem to change the value to true.

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

I found that, the problem is that I am not sure how to convert that answer into something I can use. The answer their is assuming the animation will always start. I am trying to check and see if the animation can start. — Robert E. McIntosh
– Robert E. McIntosh, Commented Jul 17, 2014 at 12:02
at least you should give javascript a chance to trigger animation start ... I think if you put: "if has animation" in a setTimeout-function 5ms? should do the trick — halfbit
– halfbit, Commented Jul 17, 2014 at 12:07
@halfbit So this worked. I would have liked to avoided a setTimeout but hey, gotta do what you gotta do. — Robert E. McIntosh
– Robert E. McIntosh, Commented Jul 17, 2014 at 12:15
I think about setTimeout(f,0,x) not as timeout, its more a "ImedaiateReEnqueue(f,x)" function for me — halfbit
– halfbit, Commented Jul 17, 2014 at 13:35

halfbit · Accepted Answer · 2014-07-17 13:13:14Z

You checking the the hasAnimation before the animation started, because you did not give up your 'timeslice'. (thats the wrong terminology, but I think 'timeslice' just describes whats going on)

AFAIK no Javascript implementaion is - preemtive - multithreaded, at least not at script level. So if you loop, you loop, and nothing else happens.

Imagine events like putting functions on a queue, and these are fired/called one after the other. Well behaved. So if you want to know whats the result of such an event, you have to end your current function (call it giving up the timeslice). Now the event starts - and is the only one now.

So if you enqueue your cleanup_if_no_animation( hasAnimation ) with a setTimeout(0) you dont really play around with times as long as the StartAnimation is not triggert with a setTimeout itself, you just give up, and start again after the (optional start event)

The same situation you have, if you want to cout to 1000 and put this into a DIV. you must use setTimeout(0) between the steps to get the display updated.

like in this 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) }

Collectives™ on Stack Overflow

Check if element has css animation

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related