首页  >  文章  >  web前端  >  为什么我的 CSS 转换会跳过并且回调无法触发?

为什么我的 CSS 转换会跳过并且回调无法触发?

Mary-Kate Olsen
Mary-Kate Olsen原创
2024-10-31 08:48:29776浏览

Why Does My CSS Transition Skip and the Callback Fail to Fire?

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中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn