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