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

Question

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

通常我只是更改值并获取，例如它的真实高度（这可能会受到它/它的任何父填充、最大高度、很多的影响。）。

但是，当这种变化通过过渡动画时，事情会变得复杂。我可以等待transitionEnd事件触发，然后检查元素大小，但我怎样才能确定转换即将发生？所以不是立即检查我知道我必须等待事件的高度吗？

Answer 1

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

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

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

编辑：我还应该说一个元素可能有几个过渡属性集。确保您进行了相应的测试（代码已更新以反映这一点）。