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 转换并调用回调函数。