CODEWITHSUNDEEP
javascriptjquerycsscss-transitionscss-animations
Thom Seddon
Thom Seddon

Reputation: 1475

How to stop CSS3 transition

I want to stop a transition that is in progress.

I have found a few references[1][2] scattered around the internet but I can't seem to piece it together.

Here's a fiddle of the first suggestion (With jQuery and CSS Transit for context): http://jsfiddle.net/thomseddon/gLjuH/

Thanks

[1] https://twitter.com/evilhackerdude/status/20466821462

[2] github.com/madrobby/zepto/issues/508

Upvotes: 21

Views: 25440

Answers (2)

Maciej Kravchyk
Maciej Kravchyk

Reputation: 16607

There's a much simpler solution. If you want to just stop the transition (and not pause it). Just set the css to current computed style. For example in a custom scrolling solution, where top is transitioned property. 

element.style.top=getComputedStyle(element).top;

and that's it.

Upvotes: 6

Thom Seddon
Thom Seddon

Reputation: 1475

So I figured it out: http://jsfiddle.net/thomseddon/gLjuH/3/

The trick is to set each css property you are animating to its current value (possibly mid transition) like: $(this).css('prop', $(this).css('prop')); (Probably would want to store all properties in an object in the element with $(this).data(props); and loop through them).

Once you have explicitly set the properties you can run a 0s animation to override the previous animation and effectively halt the element.

Upvotes: 10

Related Questions