javascript 如何停止 CSS3 过渡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12930098/
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
How to stop CSS3 transition
提问by Thom Seddon
I want to stop a transition that is in progress.
我想停止正在进行的过渡。
I have found a few references[1][2] scattered around the internet but I can't seem to piece it together.
我在互联网上发现了一些参考文献[1][2]，但我似乎无法将它们拼凑在一起。
Here's a fiddle of the first suggestion (With jQuery and CSS Transit for context): http://jsfiddle.net/thomseddon/gLjuH/
这是第一个建议的小提琴（使用 jQuery 和 CSS Transit 作为上下文）：http: //jsfiddle.net/thomseddon/gLjuH/
Thanks
谢谢
[1] https://twitter.com/evilhackerdude/status/20466821462
[1] https://twitter.com/evilhackerdude/status/20466821462
[2] github.com/madrobby/zepto/issues/508
[2] github.com/madrobby/zepto/issues/508
采纳答案by Thom Seddon
So I figured it out: http://jsfiddle.net/thomseddon/gLjuH/3/
所以我想通了：http: //jsfiddle.net/thomseddon/gLjuH/3/
The trick is to set each css property you are animating to its current value (possibly mid transition) like: $(this).css('prop', $(this).css('prop'));(Probably would want to store all properties in an object in the element with $(this).data(props); and loop through them).
诀窍是将您正在设置动画的每个 css 属性设置为其当前值（可能是中间过渡），例如：（$(this).css('prop', $(this).css('prop'));可能希望使用 $(this).data(props); 将所有属性存储在元素中的对象中；并循环遍历他们）。
Once you have explicitly set the properties you can run a 0s animation to override the previous animation and effectively halt the element.
明确设置属性后，您可以运行 0s 动画来覆盖之前的动画并有效地停止元素。
回答by Maciej Krawczyk
There's a much simpler solution. If you want to just stop the transition (and not pause it). Just set the css to current computed style. For example in a custom scrolling solution, where top is transitioned property.
有一个更简单的解决方案。如果您只想停止转换（而不是暂停它）。只需将 css 设置为当前计算样式。例如，在自定义滚动解决方案中，top 是过渡属性。
element.style.top=getComputedStyle(element).top;
and that's it.
就是这样。
