中断/停止实际位置/状态的CSS3转换

Question

我正在编写一个jQuery插件来通过CSS3 Transitions动画元素.在jQuery中,可以.stop()在所选元素上中断当前动画.

知道如何阻止正在运行的CSS3动画吗？是否存在处理此问题的本地方法,或者我是否需要对动画进行测量,并将动画元素的样式设置为当前位置,颜色大小或whaterver？

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

我试图将"-webkit-transition-duration"设置为0/none/false.但它并没有停止动画.

Answer 1

如果你的插件没有太深入,你可以使用你想要的道具css3animate的当前(计算)值重新使用你的方法,并将持续时间设置为0(你插件中的1,因为你使用!speed默认值...)

所以在使用的例子中

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

会做的.

例如http://jsfiddle.net/T5LVX/1/

当然,您应该针对当前使用的属性自动执行此操作.如果在启动动画时使用计时器,而在有人使用stop方法时使用计时器,则还可以模拟暂停/恢复功能.

更新

您可以将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/