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
}

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

编辑:我还应该说一个元素可能设置了多个过渡属性。确保您进行了相应的测试(代码已更新以反射(reflect)这一点)。