How to stop CSS3 transition

javascript jquery css css-transitions css-animations
Thom Seddon picture Thom Seddon · Oct 17, 2012 · Viewed 19.5k times · Source

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

Answer

Thom Seddon picture Thom Seddon · Oct 18, 2012

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.

Related questions

Slide down animation from display:none to display:block?

Is there a way to animate display:none to display:block using CSS so that the hidden div slides down instead of abruptly appearing, or should I go about this a different way? HTML: <div id="box"> Initial …

Read More
Adding animated captions to Owl carousel

I'm using Owl Carousel and have been trying to add animated captions (just a simple fadein on slide display) but can't seem to figure out how to do it. I have the opacity of all the captions set to 0 and …

Read More
How do I add a class to a given element?

I have an element that already has a class: <div class="someclass"> <img ... id="image1" name="image1" /> </div> Now I want to create a JavaScript function that will add a class to the div (…

Read More