2013-10-07 49 views
0

我有一個腳本,它將某些CSS樣式應用於元素,然後向該元素添加轉換樣式,然後將另一個CSS樣式應用於該元素。我試圖做的是讓元素立即應用到它的樣式,然後動畫下一個變化。代碼是基本的,只需設置樣式,然後設置過渡樣式,然後設置最終樣式。但是我正在經歷的是,第一個屬性被更改(沒有轉換的屬性)正在對其應用轉換,儘管直到之後我才設置轉換屬性。我已經仔細檢查過元素沒有應用轉換屬性。爲什麼是這樣?另外,如果我在應用第一個樣式和轉換之間留出50毫秒的延遲,它將按預期工作。影響以前修改的CSS屬性的css轉換

回答

2

在應用了第一個樣式後(所以它們不經過轉換處理),您必須強制重新佈局,然後您可以應用導致過渡的樣式。你現在這樣做的方式,所有的操作都被拆分成一個操作,因此一切都在經歷轉換。

獲取重新佈局的最簡單方法是應用第一個CSS屬性,然後執行setTimeout(fn, 1)在定時器回調中應用第二組屬性。還有其他方法可以通過請求某些觸發重新佈局的屬性來強制重新佈局。我不記得那些屬於我頭頂的屬性(需要一些研究)。

我還沒有嘗試過這個我自己,但我想請求你的元素的大小屬性,如.offsetHeight將強制重新佈局。瀏覽器意識到存在掛起的樣式更改,並且這些掛起的樣式更改可能會影響大小請求,因此它會在返回.offsetHeight值之前同步執行重新佈局,從而解決您的問題。

有些類似的問題和答案:"Force Reflow" in CSS transitions in Bootstrap

+0

這是一個解釋,而不是一個解決方案。我如何解決它?在應用轉換之前,如何讓代碼等待重新佈局完成? – Markasoftware

+0

@Markasoftware - 我已經添加了更多的答案。 – jfriend00

+0

我很希望能夠同步做到這一點,但這會奏效。謝謝!當它允許我接受答案 – Markasoftware