中断/停止实际位置/状态的CSS3转换 [英] Interrupting/stop a CSS3 transition on the actual position/state

问题描述

我编写一个jQuery插件通过CSS3过渡动画元素。在jQuery中有 .stop（），它将当前动画置于所选元素上。

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.

任何想法如何可以阻止正在运行的CSS3动画？是否有本地方式来处理这个动画，或者我必须动画动画，并将动画元素的样式设置为当前位置，颜色大小或whaterver？

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?

这是jQuery插件的当前状态：
http://jsfiddle.net/meo/r4Ppw/

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

我已尝试将-webkit-transition-duration设置为0 / none / false。但它不会停止动画。

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

推荐答案

不要在你的插件太深，你可以重新使用你的< c $ c> css3animate 方法使用您想要的道具的当前（计算）值，并设置持续时间为0（

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..)

所以在使用

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

会执行。

在 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 ..

更新

您可以将 cssObject 动画，到元素的数据，并在停止循环通过他们获得当前值。

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.

在动画方法中，您可以 $ obj.data（'animationCss'，cssObject）; $ c> stop 方法

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");
    });
   }

示例： http://jsfiddle.net/T5LVX/6/

这篇关于中断/停止实际位置/状态的CSS3转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！