如何判断CSS转换是否即将发生？

Question

这是我的问题。假设我将div高度从10px更改为50px，然后想要对其大小进行一些计算。

通常我只是改变它的值，例如它的真实高度（它可以受其父母的任何填充，最大高度，地段影响）。

但是，当这个改变是动画过渡的事情变得复杂。我可以等待transitionEnd事件触发，然后检查元素大小，但是如何才能确定该过渡即将发生？所以，而不是立即检查我知道的高度，我必须等待事件？

Answer 1

测试过渡属性的计算样式。如果它与您正在更改的属性相匹配，请等待transitionEnd事件。

if(window.getComputedStyle(element).transitionProperty.match(/\bheight\b/)) 
{ 
    //handle transitionEnd event 
} 
else 
{ 
    //do calculations now 
} 

当然，您需要检查浏览器的特定前缀。

编辑：我还应该说一个元素可能有多个转换属性集。确保你测试相应（代码更新以反映）。