javascript 检查元素是否正在动画 CSS3
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9736919/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Check if element is being animated CSS3
提问by fxck
Is there any way to check if element is being animated?
有没有办法检查元素是否正在动画？
But being animated notwith jquery's animate, but with css3's transition..
但是动画不是用 jquery 的动画，而是用 css3 的过渡..
The problem I have is... I have this slider, on arrow click I give it
我的问题是......我有这个滑块，点击箭头我给它
left = left+200
where left is either
左边是
element.position().left
or
或者
parseInt(element.css("left"));
(it doesn't really matter, the problem occurs with either)
（这并不重要，问题发生在任何一个）
the element is being animated with
元素被动画化
transition: left 400ms ease-in-out;
so, when the user clicks on the arrow once and then again before the animation finishes, left returns value depending on its position(so instead of say.. 400px, it might return 235.47px since it was clicked in the middle of the animation)..
因此，当用户在动画完成之前再次单击箭头时，左返回取决于其位置的值（因此，而不是说.. 400px，它可能返回 235.47px，因为它是在动画中间单击的） ..
回答by Frédéric Hamidi
When you change the leftproperty of an element, you can associate a boolean value with it (using data()for instance) and set it to trueto indicate a transition has started. Then, you can bind to the transition end event(which varies depending on the browser) and set the boolean value back to falsefrom your handler to indicate the transition has ended.
当您更改left元素的属性时，您可以将一个布尔值与其关联（例如使用data()）并将其设置true为指示转换已开始。然后，您可以绑定到转换结束事件（因浏览器而异）并将布尔值设置回false您的处理程序以指示转换已结束。
The end result is something like:
最终结果类似于：
yourElement.on(
"transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd",
function() {
$(this).data("transitioning", false); // Transition has ended.
}
);
(Note the code above only has to run once.)
（注意上面的代码只需要运行一次。）
if (!yourElement.data("transitioning")) {
// No transition active, compute new position.
var theNewLeft = yourElement.position().left + 200;
// Set new position, which will start a new transition.
yourElement.data("transitioning", true).css("left", theNewLeft);
}
