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不会被解雇！

我做了一个帮手在这里解释：http: //jsfiddle.net/JtLAX/

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

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

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

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

有了它，你可以简单地

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

关于你的主要问题：

有没有办法检查是否会发生 CSS 转换？

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