为什么 CSS 过渡有时会跳过或无法触发回调？

CSS 过渡跳过或未调用回调：了解原因

在 CSS 中，过渡提供了一种优雅的方式来平滑地动画属性随时间的变化。但是，在某些情况下，可能会出现转换无法执行或关联的回调仍未调用的情况。

在游戏开发过程中向射弹元素分配新位置值时，就会出现这样的情况。尽管用纯 JS 替换了 jQuery 调用，但转换似乎完全被跳过，并且没有触发任何回调。

缺失转换之谜

奇怪的是，包装CSS 位置在 1ms setTimeout 内发生变化以某种方式解决了这个问题，尽管有时过渡仍然会被绕过。这种不一致引发了一个问题：为什么 setTimeout 有帮助，为什么回调有时会失败？

计算样式的作用

理解这种行为的关键在于在 CSS 计算样式中。当您通过 JavaScript 设置新样式时，浏览器可能不会立即应用它们。相反，元素的计算样式保持不变，导致内联样式和计算值之间存在差异。

对于projectile元素，虽然内联样式指定了left和top值，但计算值style 最初保留默认值 0px。

对过渡的影响

过渡依赖计算样式来确定动画的开始和结束状态。当初始计算样式与您尝试转换的内联样式不同时，转换基本上没有任何效果并且似乎会跳过。

解决方案：强制回流

要解决此问题并确保过渡始终正确执行，有必要强制浏览器执行回流，从而重新计算计算的样式。

实现此目的的一种方法是访问需要的属性最新的样式，例如 offsetHeight。在提供的代码中，animdiv.offsetHeight 在分配新的左侧值和顶部值之前触发重排。

结论

通过了解计算样式的问题，您可以确保 CSS 转换按预期运行并且可靠地调用回调。如果您观察到不规则行为，请记住在转换元素之前强制回流。

以上是为什么 CSS 过渡有时会跳过或无法触发回调？的详细内容。更多信息请关注PHP中文网其他相关文章！