如何停止CSS3过渡

Question

我想停止正在进行的转换.

我发现一些散布在互联网上的参考文献[1] [2],但我似乎无法把它拼凑在一起.

这是第一个建议的小提琴(用jQuery和CSS Transit作为上下文):http://jsfiddle.net/thomseddon/gLjuH/

谢谢

[1] https://twitter.com/evilhackerdude/status/20466821462

[2] github.com/madrobby/zepto/issues/508

Answer 1

所以我想出来了:http://jsfiddle.net/thomseddon/gLjuH/3/

诀窍是将您动画的每个css属性设置为其当前值(可能是中间转换),如:( $(this).css('prop', $(this).css('prop'));可能希望将所有属性存储在元素中的对象中,使用$(this).data(props);并循环执行他们).

一旦明确设置了属性,就可以运行0s动画来覆盖上一个动画并有效地暂停该元素.

Answer 2

有一个更简单的解决方案。如果您只想停止转换（而不是暂停它）。只需将 css 设置为当前计算的样式即可。例如，在自定义滚动解决方案中，顶部是过渡属性。

element.style.top=getComputedStyle(element).top;

就是这样。