Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to stop CSS3 transition

Tags:

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

like image 940
Thom Seddon Avatar asked Oct 17 '12 08:10

Thom Seddon


People also ask

How do you stop a transition in CSS?

To trigger an element's transition, toggle a class name on that element that triggers it. To pause an element's transition, use getComputedStyle and getPropertyValue at the point in the transition you want to pause it. Then set those CSS properties of that element equal to those values you just got.

How do you pause transitions?

A solution would be to remove the transition class and save the current state of styles ( margin-left in the example) when stopping. And when starting just add the transition class again.

What triggers CSS transition?

Triggering transitions You can trigger CSS transitions directly with pseudo classes like :hover (activates when the mouse goes over an element), :focus (activates when a user tabs onto an element, or when a user clicks into an input element), or :active (activates when user clicks on the element).


1 Answers

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.

like image 52
Thom Seddon Avatar answered Oct 23 '22 03:10

Thom Seddon