有没有一种方法可以检查CSS过渡是否发生？

Question

我使用Javascript对对象进行了转换：

$(this).css('transition', 'all 1000ms');

我听过渡结束事件：

$(this).on('webkitTransitionEnd', function() { alert('Transition did finish.'); });

事件被触发，一切正常。但是，当元素以left:100px开头并尝试将其设置为left:100px动画时，该事件将永远不会触发，从而导致问题。我该如何解决？我真的无法对照新值检查该值，因为

$(this).css('transform', 'scale(0.1)'); //only when object is being displayed will return matrix value

scale(0.5) does not equal matrix(0.5, 0, 0, 0.5, 0, 0 )

Answer 1

如果您的属性相等，则不会发生webkit-transition，因此不会触发webkitTransitionEnd！

我帮了忙在这里解释：http://jsfiddle.net/JtLAX/

所以您将不得不在此处找到用于回调函数的其他方法。

您可能会在触发转换的事件开始时添加setTimeout（function（）{}，1000）。

或者您可以尝试使用该库，它对于管理过渡和设置回调非常有效：

http://ricostacruz.com/jquery.transit/

有了它，您可以简单地

$(this).transit({ left: '+=200' }, function() { alert('transition ends' } );

关于您的主要问题：

有没有一种方法可以检查CSS过渡是否会发生？

恕我直言，我认为唯一的解决方案是手动检查样式元素的属性，并将它们与过渡进行比较，这非常困难。