为什么我的 CSS 过渡不能与内联样式一起使用以及如何修复它？

CSS 转换未启动或未调用回调

问题：

在一个基于 JavaScript 的游戏项目中，尝试用 CSS 过渡来代替 jQuery 动画以实现弹丸运动，但事实证明并不成功。即使应用了 setTimeout 延迟，转换也会跳过或未触发回调。

说明：

出现此行为是因为浏览器尚未应用应用过渡属性之前的内联 CSS 样式。当设置新样式时，元素的计算样式仍然具有显示、左侧和顶部位置的默认值。

由于左侧和顶部值保持为 0px（它们的默认值），因此过渡无关因为这些值与新样式中设置的值相匹配。要纠正此问题，必须在应用过渡之前强制浏览器重排更新样式。

解决方案：

要强制浏览器重排，请使用 Element.offsetHeight吸气剂。例如：

<code class="js">// Assume animdiv is the element you want the transition to work on
animdiv.offsetTop;
// Now animdiv has all inline styles set

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

此步骤确保元素的计算样式是最新的，并且过渡将按预期应用。

以上是为什么我的 CSS 过渡不能与内联样式一起使用以及如何修复它？的详细内容。更多信息请关注PHP中文网其他相关文章！