如何停止CSS3过渡 [英] How to stop CSS3 transition

问题描述

我想停止正在进行的过渡.

我在互联网上发现了一些参考文献[1] [2]，但我似乎无法将它们拼凑在一起.

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

谢谢

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

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

解决方案

所以我弄清楚了: http://jsfiddle. net/thomseddon/gLjuH/3/

诀窍是将要设置动画的每个css属性设置为其当前值(可能是中间过渡)，例如:$(this).css('prop', $(this).css('prop'));(可能希望使用$(this).data(将所有属性存储在元素中的对象中).道具)；并在它们之间循环).

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

I want to stop a transition that is in progress.

I have found a few references[1][2] scattered around the internet but I can't seem to piece it together.

Here's a fiddle of the first suggestion (With jQuery and CSS Transit for context): http://jsfiddle.net/thomseddon/gLjuH/

Thanks

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

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

解决方案

So I figured it out: http://jsfiddle.net/thomseddon/gLjuH/3/

The trick is to set each css property you are animating to its current value (possibly mid transition) like: $(this).css('prop', $(this).css('prop')); (Probably would want to store all properties in an object in the element with $(this).data(props); and loop through them).

Once you have explicitly set the properties you can run a 0s animation to override the previous animation and effectively halt the element.

这篇关于如何停止CSS3过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！