javascript - 有没有一种方法可以检查是否会发生 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!

我在这里做了一个 helper 来解释:http://jsfiddle.net/JtLAX/

所以你必须在这里为回调函数找到不同的方法。

每当触发转换的事件开始时，您可能想要添加一个 setTimeout(function() {}, 1000)。

或者你可以试试这个库，它对于管理转换和设置回调非常有效:

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

有了它你可以很简单

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

关于您的主要问题:

有没有一种方法可以检查是否会发生 css 转换？

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