Interrupting/Stop a CSS3 Transition on the Actual Position/State

Interrupting/stop a CSS3 transition on the actual position/state

Without going too deep in your plugin, you can just re-use your css3animate method using the current (computed) values for the props you want, and setting the duration to 0 (1 in you plugin since you use the !speed to use the default..)

so in the example using

var $animated = $('div');
$animated.css3animate({"height": $animated.css('height'), "width": $animated.css('width')}, 1);

will do the trick.

example at http://jsfiddle.net/T5LVX/1/

Of course, you should automate this for the current properties in use. If you use a timer when you start the animation and one when someone use the stop method, you can also simulate a pause/resume functionality ..

---

update

You can store the cssObject passed to the animation, to the data of the element, and on stop loop through them to get the current values.

So in you animation method you could $obj.data('animationCss', cssObject); and in the stop method

stop : function( clearQueue,jumpToEnd ){
    return this.each(function(){
        var $that = $(this);
        var currentCss = {};
        var animationCss = $that.data('animationCss');
        for (var prop in animationCss)
            currentCss[prop] = $that.css(prop);

        if (jumpToEnd)
        {
            animation($that,currentCss,1, function(){animation($that,animationCss,1)});
        }
        else
        {
            animation($that,currentCss,1);
        }
       console.log("stop was called");
    });
   }

example: http://jsfiddle.net/T5LVX/6/

How to stop CSS3 transition

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.

Maintaining the final state at end of a CSS3 animation

Try adding animation-fill-mode: forwards;. For example like this:

-webkit-animation: bubble 1.0s forwards; /* for less modern browsers */
        animation: bubble 1.0s forwards;

Fluidly stop a CSS3 Animation halted mid-animation?

css3 animation on :hover; force entire animation

Something similar asked a couple days ago. This person also wanted their entire animation to show after hover was removed. Check it out.

Is there a way to pause CSS transition mid-way?

1) You can use the animation-play-state CSS attribute, and toggle between

animation-play-state:running, and animation-play-state:paused
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state

2) The short answer is yes. Whichever property you read halfway through your transition (lets say height), will return the current value at the moment queried.

How to prevent a CSS animation from going back to its original position?

You need to use animation-fill-mode with a value set to forwards

From Mozilla Developer Network:

The target will retain the computed values set by the last keyframe
encountered during execution. The last keyframe encountered depends on
the value of animation-direction and animation-iteration-count

Demo

---

Related Topics