javascript 在实际位置/状态上中断/停止 CSS3 转换
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5312289/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Interrupting/stop a CSS3 transition on the actual position/state
提问by meo
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.
我正在编写一个 jQuery 插件来通过 CSS3 Transitions 为元素设置动画。在 jQuery 中，因为.stop()它会中断所选元素上的当前动画。
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?
知道如何停止正在运行的 CSS3 动画吗？有没有本地方法来处理这个问题，或者我必须测量动画，并将动画元素的样式设置为当前位置、颜色大小或其他什么？
This is the current state of the jQuery plugin: http://jsfiddle.net/meo/r4Ppw/
这是 jQuery 插件的当前状态：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.
我试图将“-webkit-transition-duration”设置为 0/none/false。但它不会停止动画。
采纳答案by Gabriele Petrioli
Without going too deep in your plugin, you can just re-use your css3animatemethod using the current (computed) values for the props you want, and setting the duration to 0 (1 in you plugin since you use the !speedto use the default..)
无需深入了解您的插件，您只需使用您想要的道具css3animate的当前（计算）值重新使用您的方法，并将持续时间设置为 0（插件中的 1，因为您使用!speed使用默认值..)
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/
示例在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 cssObjectpassed to the animation, to the dataof the element, and on stop loop through them to get the current values.
您可以存储cssObject传递给动画、data元素的 ，并在停止时通过它们循环获取当前值。
So in you animationmethod you could $obj.data('animationCss', cssObject);and in the stopmethod
所以在你的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");
});
}
example: http://jsfiddle.net/T5LVX/6/
