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

这是我的问题。假设我将div高度从10px更改为50px，然后想要对其大小进行一些计算。如何判断CSS转换是否即将发生？

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

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

来源

2013-02-20 crappish

你可以缩小一点点，给我们一个你想要完成的事情吗？你的代码如何分离，以便你必须“检查”css过渡是否“发生”？ – 2013-02-20 21:59:52

为什么你想首先计算大小？如果你的东西会根据div而改变，同时全部设置它们并动画整个... – 2013-02-20 22:22:18

更改div大小。阅读新的尺寸。设置大小。在div动画到位时使用读取大小进行计算。 – 2013-02-21 01:02:59

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

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

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

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

来源

2013-02-21 19:42:27 buckminst

啊。是。这正是我需要的。谢谢！对于供应商前缀（例如Chrome使用WebkitTransitionProperty），我只是将您的解决方案与Modernizr的前缀（）函数和ta-daa结合在一起！奇迹般有效！另外，为 crappish 2013-02-22 09:57:06

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

回答

相关问题