Question

有没有办法检查元素是否正在动画？

但是使用jquery的动画制作动画不，但是使用css3的转换..

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

left = left+200

左边是

element.position().left

或

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

（这并不重要，任何一个问题都会发生）

使用

动画元素

transition: left 400ms ease-in-out;

所以，当用户点击箭头一次然后在动画结束前再次点击时，left会根据其位置返回值（因此，而不是说.. 400px，它可能返回235.47px，因为它在中间点击动画）..

Answer 1

当您更改元素的left属性时，可以将布尔值与其关联（例如，使用data()）并将其设置为true以指示已开始转换。然后，您可以绑定到transition end event（根据浏览器的不同而不同），并从处理程序中将布尔值设置回false，以指示转换已结束。

最终结果如下：

yourElement.on(
    "transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd",
    function() {
        $(this).data("transitioning", false);  // Transition has ended.
    }
);

（注意上面的代码只需要运行一次。）

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

1 个答案: