如何停止 CSS3 过渡

Posted 2023-03-06

【中文标题】如何停止 CSS3 过渡

【英文标题】：How to stop CSS3 transition

【发布时间】：2012-10-07 11:05:08

【问题描述】：

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

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

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

谢谢

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

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

【问题讨论】：

看看这个也许对***.com/questions/5312289/…有帮助

谢谢，应该也链接到它

知道了：jsfiddle.net/thomseddon/gLjuH/3

【参考方案1】：

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

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

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

【讨论】：

感谢 jsfiddle。我做了一些重构并将其分解为这里的核心概念：jsfiddle.net/jedhunsaker/gLjuH/13

@mrjedmao - 小提琴链接已失效:(

@Danield 抱歉，我最近改了名字，所以现在是jsfiddle.net/jedmao/gLjuH/13

PX 不需要切片。 parseInt 自动执行此操作

【参考方案2】：

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

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

就是这样。