為什麼我的 CSS 轉換沒有啟動或觸發回調函數，如何使用 setTimeout 修復它？

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

問題摘要

使用 CSS 轉換更新 HTML 元素的位置。但是，儘管新增了轉換transitionend事件偵聽器，但轉換無法觸發或未呼叫回調函數。這個問題可以用 setTimeout(1ms) 包裝更改來解決。

解決方案說明

此行為背後的原因在於瀏覽器的渲染過程。在瀏覽器應用 CSS 轉換之前，必須先將內聯樣式套用到元素。如果該元素尚未在 DOM 中，則其計算樣式顯示設為「」。

設定新樣式時，瀏覽器尚未套用內聯樣式。因此，元素的計算樣式仍為“”，其 left 和 top 值仍為 0px。

因此，當在下一幀繪製之前應用過渡屬性時，left 和 top 值已經是所需的值，導致沒有要執行的轉換，也沒有觸發transitionend事件。

要解決此問題，可以使用 Element.offsetHeight getter 或其他需要最新樣式的 DOM 方法強制回流。這會強制瀏覽器在套用過渡之前更新樣式，確保順利實作。

範例

以下程式碼示範了該問題及其解決方法：

<code class="html"><div id="spanky" style="position: absolute;
    left: 10px;
    top: 10px;
    background-color: blue;
    width: 20px;
    height: 20px;
    transition: left 1000ms linear 0s, top 1000ms linear 0s;">
</div></code>

<code class="js">document.body.innerHTML += tablehtml;

var animdiv = document.getElementById('spanky');
animdiv.addEventListener("transitionend", function(event) {
  animdiv.style.backgroundColor = 'red';
}, false);

// force a reflow
animdiv.offsetTop;

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

在此範例中，animdiv 元素的offsetTop getter 用於其位置更新之前強制回流。這確保了 CSS 轉換正確觸發並呼叫回調函數。

以上是為什麼我的 CSS 轉換沒有啟動或觸發回調函數，如何使用 setTimeout 修復它？的詳細內容。更多資訊請關注PHP中文網其他相關文章！