在 CSS 中，过渡提供了一种优雅的方式来平滑地动画属性随时间的变化。但是，在某些情况下，可能会出现转换无法执行或关联的回调仍未调用的情况。
在游戏开发过程中向射弹元素分配新位置值时，就会出现这样的情况。尽管用纯 JS 替换了 jQuery 调用，但转换似乎完全被跳过，并且没有触发任何回调。
缺失转换之谜
奇怪的是，包装CSS 位置在 1ms setTimeout 内发生变化以某种方式解决了这个问题，尽管有时过渡仍然会被绕过。这种不一致引发了一个问题：为什么 setTimeout 有帮助，为什么回调有时会失败？
计算样式的作用
理解这种行为的关键在于在 CSS 计算样式中。当您通过 JavaScript 设置新样式时，浏览器可能不会立即应用它们。相反，元素的计算样式保持不变，导致内联样式和计算值之间存在差异。
对于projectile元素，虽然内联样式指定了left和top值，但计算值style 最初保留默认值 0px。
对过渡的影响
过渡依赖计算样式来确定动画的开始和结束状态。当初始计算样式与您尝试转换的内联样式不同时，转换基本上没有任何效果并且似乎会跳过。
解决方案：强制回流
要解决此问题并确保过渡始终正确执行，有必要强制浏览器执行回流，从而重新计算计算的样式。
实现此目的的一种方法是访问需要的属性最新的样式，例如 offsetHeight。在提供的代码中，animdiv.offsetHeight 在分配新的左侧值和顶部值之前触发重排。
结论
通过了解计算样式的问题，您可以确保 CSS 转换按预期运行并且可靠地调用回调。如果您观察到不规则行为，请记住在转换元素之前强制回流。
以上是为什么 CSS 过渡有时会跳过或无法触发回调？的详细内容。更多信息请关注PHP中文网其他相关文章！
