我正在编写一个jQuery插件来通过CSS3 Transitions动画元素.在jQuery中,可以.stop()在所选元素上中断当前动画.
知道如何阻止正在运行的CSS3动画吗?是否存在处理此问题的本地方法,或者我是否需要对动画进行测量,并将动画元素的样式设置为当前位置,颜色大小或whaterver?
这是jQuery插件的当前状态:http: //jsfiddle.net/meo/r4Ppw/
我试图将"-webkit-transition-duration"设置为0/none/false.但它并没有停止动画.
我需要在过渡期间随时暂停 CSS 过渡。我知道有一个计算过渡属性的当前值并直接应用它的解决方案,但是这给了我在 Safari 和 IE11 中“跳跃”的结果。
我的想法是将transition-duration价值增加到一些大的东西,这在我的理论中应该几乎暂停过渡,但似乎并非如此:
https://jsfiddle.net/j8p0msff/
$('#pause').on('click', function() {
$('.ball').css('transition-duration: 5000s');
});
Run Code Online (Sandbox Code Playgroud)
还有其他想法吗?谢谢!