為什麼我的 CSS 轉換會跳過並且回呼無法觸發？

CSS 轉換未啟動或未呼叫回呼：分析

您的問題源自於 CSS 轉換和瀏覽器的怪癖渲染過程。最初，您使用 CSS 位置值內嵌 HTML，在 left 和 top 屬性上設定過渡。新增位置值後，您預計會發生轉換，但它跳過了，沒有觸發回呼。

有趣的是，添加 1ms setTimeout 來包裝樣式更改啟動了轉換。然而，有時回調仍未觸發。此行為可以歸因於瀏覽器的計時。

說明：

設定新樣式時，瀏覽器尚未將內聯樣式套用於計算樣式。元素的計算樣式對於 left 和 top 屬性保持未設置，預設為 0px。稍後應用的任何過渡都只是與設定值匹配，不會發生任何過渡。

要解決此問題，必須強制回流以更新樣式。這可以使用 offsetHeight getter 或其他觸發回流的類似方法來完成。

使用 offsetHeight 的範例：

<code class="javascript">let tablehtml = `
<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>`;

document.body.innerHTML += tablehtml;

let animdiv = document.getElementById('spanky');
animdiv.addEventListener("transitionend", function(event) { 
  animdiv.style.backgroundColor='red';
}, false);
// force a reflow
animdiv.offsetTop;
// now animdiv will have all the inline styles set
// it will even have a proper display

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

以上是為什麼我的 CSS 轉換會跳過並且回呼無法觸發？的詳細內容。更多資訊請關注PHP中文網其他相關文章！