如何判斷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轉換是否即將發生？

回答

相關問題