前端中的量子力学——一打开 F12 就消失的 Bug
💡
原文中文，约2400字，阅读约需6分钟。
📝
内容提要
一名程序员遇到一个奇怪的 bug，打开 DevTools 时问题消失，关闭后又出现。经过分析，发现是浏览器渲染状态导致的跳帧问题。最终通过嵌套 requestAnimationFrame 方法解决了动画过渡问题。
🎯
关键要点
- 程序员遇到奇怪的 bug，打开 DevTools 时问题消失，关闭后又出现。
- 问题是由于浏览器渲染状态导致的跳帧问题。
- 观测者效应影响了动画的表现，导致无法准确测量速度。
- 需求是实现无限滚动的轮播标题列表，出现了过渡动画问题。
- 使用 setTimeout 和 requestAnimationFrame 方法解决了动画过渡问题。
- 嵌套的 requestAnimationFrame 方法可以避免浏览器将 transform 和 transition 合并到同一帧。
- 最终通过调整代码成功解决了动画突变的问题。
❓
延伸问答
为什么打开 DevTools 时 bug 会消失？
打开 DevTools 会强制刷新帧或提高定时器精度，从而掩盖了跳帧问题。
什么是观测者效应？
观测者效应是指观察行为对被观测对象造成影响的现象，常见于量子力学实验中。
如何解决动画过渡问题？
通过嵌套使用 requestAnimationFrame 方法，可以避免浏览器将 transform 和 transition 合并到同一帧。
在实现无限滚动的轮播标题列表时遇到什么问题？
在平移列表时，尽管取消了 transition 属性，仍然触发了过渡动画效果。
使用 setTimeout 和 requestAnimationFrame 的目的是什么？
使用 setTimeout 来延迟执行，requestAnimationFrame 用于确保动画在下一次重绘前执行，避免跳帧。
如何实现无限滚动的效果？
通过取消过渡动画，平移列表到上一次可视范围，再恢复过渡动画，视觉上实现无限滚动效果。
➡️
