为什么我的 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中文网其他相关文章！