javascript - 在实际位置/状态上中断/停止 CSS3 转换

Question

我正在编写一个 jQuery 插件，通过 CSS3 Transitions 为元素设置动画。在 jQuery 中有 .stop() 中断所选元素上的当前动画。

知道如何停止正在运行的 CSS3 动画吗？有没有一种本地方法来处理这个问题，还是我必须测量动画，并将动画元素的样式设置为当前位置、颜色大小或其他？

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

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

Answer 1

无需深入了解您的插件，您可以重新使用您的 css3animate方法使用所需 Prop 的当前(计算)值，并将持续时间设置为 0(插件中的 1，因为您使用 !speed 来使用默认值..)

所以在例子中使用

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

会成功的。

例子在 http://jsfiddle.net/T5LVX/1/

当然，您应该为当前使用的属性自动执行此操作。如果您在开始动画时使用计时器，而当有人使用停止方法时使用计时器，您还可以模拟暂停/恢复功能..

---

更新

您可以存储 cssObject传递给动画，传递给 data元素，并停止循环遍历它们以获取当前值。

所以在你身上 animation你可以的方法$obj.data('animationCss', cssObject);在stop方法

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/