检查元素是否是动画CSS3

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

但是不是用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); }