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

問題摘要

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

解決方案說明

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

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

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

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

範例

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

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"
});

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