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

【问题标题】：Is there a way you can check if a css transition will take place?有没有办法检查是否会发生 CSS 转换？
【发布时间】：2012-05-03 05:52:28
【问题描述】：

我使用 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 )

【问题讨论】：

标签： javascript css webkit css-transitions webkit-transition

【解决方案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 转换？

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

【讨论】：

timeOuts 应该尽可能的避免，因为当 DOM 处理一个对象的时间很短时，动画可以在 timeOut 之后开始，因此 timeOut 会更快完成。
Javascript 是异步工作的，所以如果你正确设置了超时时间，你不必太担心这一点。事实上有很多过渡 javascript 插件，因为 jquery.transit 使用超时回调作为备用，如果 webkitTransitionEnd 没有触发。看看 jquery.transit 的源代码，你会激动不已！
代码对于过渡来说是巨大的，但我会更多地研究它，也会使用你的助手（谢谢你）。尝试将非常大的图像调整为小 div 时会出现问题，处理时间在 PC 上并不明显，但在智能手机和 iPad 上需要一定的时间，而异步超时已经在运行。这意味着超时将比动画更早结束（再次在 iPad 上）。这就是我宁愿依赖 webkitTransitionEnd 的原因（我假设如果 webkitTransition 可用，该事件也将可用）。
嗯，使用 javascript 管理转换是一个大问题。我最近发现了 John Resign（jQuery 的作者）的一篇文章 [ejohn.org/blog/css-animations-and-javascript/]，他指出没有办法找出过渡/动画何时开始或它已经开始时的状态。它需要更多的思考/测试来在你的代码中管理这个。