如何停止 CSS3 过渡答案

【问题标题】：How to stop CSS3 transition如何停止 CSS3 过渡
【发布时间】：2012-10-07 11:05:08
【问题描述】：

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

我在互联网上找到了一些参考资料[1][2]，但我似乎无法将它们拼凑起来。

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

谢谢

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

【问题讨论】：

【解决方案1】：

所以我想通了：http://jsfiddle.net/thomseddon/gLjuH/3/

诀窍是将您正在制作动画的每个 css 属性设置为其当前值（可能是中间过渡），例如：$(this).css('prop', $(this).css('prop'));（可能希望使用 $(this).data( props)；并循环遍历它们)。

一旦你明确设置了属性，你就可以运行一个 0s 动画来覆盖之前的动画并有效地停止元素。

【讨论】：

【解决方案2】：

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

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

就是这样。

【讨论】：