為什麼我的 CSS 轉換不能與內聯樣式一起使用以及如何修復它？

CSS 轉換未啟動或未呼叫回呼

問題：

問題：

在一個基於JavaScript的遊戲專案中，嘗試用CSS 過渡來代替jQuery 動畫以實現彈丸運動，但事實證明並不成功。即使套用了 setTimeout 延遲，轉換也會跳過或未觸發回呼。

說明：

出現此行為是因為瀏覽器尚未套用過渡屬性之前的內嵌 CSS 樣式。當設定新樣式時，元素的計算樣式仍然具有顯示、左側和頂部位置的預設值。 由於左側和頂部值保持為 0px（它們的預設值），因此過渡無關因為這些值與新樣式中設定的值相符。若要修正此問題，必須在套用過渡之前強制瀏覽器重排更新樣式。

解決方案：

<code class="js">// Assume animdiv is the element you want the transition to work on
animdiv.offsetTop;
// Now animdiv has all inline styles set

Object.assign(animdiv.style, {
  left: "100px",
  top: "100px"
});</code>

要強制瀏覽器重排，請使用 Element.offsetHeight吸氣劑。例如：此步驟確保元素的計算樣式是最新的，並且過渡將按預期應用。

以上是為什麼我的 CSS 轉換不能與內聯樣式一起使用以及如何修復它？的詳細內容。更多資訊請關注PHP中文網其他相關文章！