如何停止CSS3过渡效果

Question

我想停止正在进行中的过渡。

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

这是第一个建议的fiddle（带有jQuery和CSS Transit的背景）：http://jsfiddle.net/thomseddon/gLjuH/

谢谢

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

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

- Thom Seddon

---

检查一下这个，也许会有帮助：https://dev59.com/jG435IYBdhLWcg3wnBd8 - Afshin

谢谢，还应该把它链接上。 - Thom Seddon

明白了：http://jsfiddle.net/thomseddon/gLjuH/3/ - Thom Seddon

Answer 1

所以我找到了解决方法：http://jsfiddle.net/thomseddon/gLjuH/3/

诀窍是将你要动画的每个CSS属性设置为它的当前值（可能是中间过渡状态），例如：$(this).css('prop', $(this).css('prop')); （可能希望在元素中存储所有属性，并通过 $(this).data(props); 循环遍历）。

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

- Thom Seddon

---

感谢提供 jsfiddle，我进行了一些重构并将其简化到核心概念：http://jsfiddle.net/jedhunsaker/gLjuH/13/。 - jedmao

@mrjedmao - 那个fiddle链接已经失效了 :( - Danield

@Danield 对不起，最近我改了我的名字，现在是http://jsfiddle.net/jedmao/gLjuH/13/。 - jedmao

不需要使用切片来截取PX。parseInt会自动完成此操作。 - Victorino

Answer 2

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

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

就是这样。

- Maciej Krawczyk