如何判断CSS过渡即将发生？

Question

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

通常情况下，我只是更改值并得到，例如它的真实高度（可以用它/它的任何父级填充，最大高度，批次来影响。）

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

Answer 1

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

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

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

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