CODEWITHSUNDEEP
javascriptjquerycss-transitionstransitionend
nonopolarity
nonopolarity

Reputation: 151196

For JavaScript or jQuery, how to make transitionend event not fire?

In the link:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

it is said that:

Note: The transitionend event doesn't fire if the transition is aborted because the animating property's value is changed before the transition is completed.

So I went ahead and tried it on http://jsfiddle.net/HA8s2/32/ and http://jsfiddle.net/HA8s2/33/ using Chrome and Firefox.

example: (click on either the left or right box in jsfiddle)

$(".foo").click(function(evt) { 
    $(".foo").addClass("hide");
    setTimeout(function() {
        $(".foo").eq(0).removeClass("hide");
    }, 3000);
});

$(".foo").on("transitionend", function(evt) {
    console.log("wow! transitionend fired for", evt.target, "at time =", (new Date()).getTime() / 1000);
});

this is with a CSS transition duration for 6 seconds:

transition-duration: 6s;

But both kept the animation. The left box actually "animate to a new value in the middle of the original animation", so it took 9 seconds for the left to finish, while the right box took 6 seconds to finish.

In addition, Firefox only have the two events in http://jsfiddle.net/HA8s2/32/ separated by 2 seconds, instead of 3 seconds.

The question is: how do I make the transitionend stop as described in the docs in mozilla.org? (and not by any other brute force method).

(in other words, I want to find out all the situations that the transitionend will not fire and test it out).

Update: I was able to abort the animation if I add display: none to the box on the left, as on http://jsfiddle.net/HA8s2/34/ and won't be able to abort it if it is visibility: hidden as in http://jsfiddle.net/HA8s2/35/ but these do not really "change" the property's value as the docs says -- it is to add or change another property value.

Upvotes: 1

Views: 555

Answers (1)

Jared
Jared

Reputation: 3016

Couldn't you give it a new class that overrides the transition property, removing it?

Your current code is like:

.myelem { transition: 0.5s all; }

You would add this code:

.alsothis { transition: none; }

When you apply the alsothis class to your element, the new transition property value will override the other one, removing the animation effect.

Upvotes: 0

Related Questions