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

cssjavascript

I am writing a jQuery plugin to animate elements via CSS3 Transitions. in jQuery there is as .stop() that interupts the current animation on the selected element.

Any idea how i could stop a running CSS3 animation? Is there a native way to handle this or do i have to mesure the animation, and set the style of the animated element to the current position, color size or whaterver?

This is the current state of the jQuery plugin:
http://jsfiddle.net/meo/r4Ppw/

I have tried to set to "-webkit-transition-duration" to 0 / none / false. but it does not stop the animation.

Best Answer

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/

Related Topic