检查元素是否是动画CSS3

Question

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

但不是使用jquery的动画制作动画,而是使用css3的过渡..

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

left = left+200

左边是哪里

element.position().left

要么

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

(这没关系,问题也出现了)

该元素正在动画

transition: left 400ms ease-in-out;

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

Answer 1

更改left元素的属性时,可以将布尔值与其关联(例如,使用data())并将其设置true为指示已开始转换.然后,您可以绑定到转换结束事件(根据浏览器而变化)并将布尔值设置回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);
}