javascript - 如何停止 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 设置为当前计算的样式。例如，在自定义滚动解决方案中，top 是转换属性。

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

就是这样。