检查元素是否正在动画CSS3 [英] Check if element is being animated CSS3

问题描述

有什么方法可以检查元素是否正在动画？

Is there any way to check if element is being animated?

但是使用jquery的动画，但是使用css3的过渡动画不。 。

But being animated not with jquery's animate, but with css3's transition..

我遇到的问题是...我有这个滑块，箭头上点击我给它

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

或

parseInt(element.css("left"));

（这并不重要，问题出在两者之一）

(it doesn't really matter, the problem occurs with either)

元素使用

transition: left 400ms ease-in-out;

因此，当用户在动画完成之前单击箭头一次，然后再次单击时，left返回值取决于它的位置（所以，而不是说.. 400px，它可能会返回235.47px，因为它是在动画的中间点击）。

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)..

推荐答案

当您更改元素的 left 属性时，您可以将布尔值与其关联（使用 data（）），并将其设置为 true 以指示转换已开始。然后，您可以绑定到转换结束事件（具体取决于浏览器） ），并从您的处理程序中将布尔值设置回 false ，表示转换已结束。

When you change the left property of an element, you can associate a boolean value with it (using data() for instance) and set it to true to 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 false from your handler to indicate the transition has ended.

是类似于：

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);
}

这篇关于检查元素是否正在动画CSS3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！