嵌套与非嵌套requestAnimationFrame的差异、应用场景及样式生效疑问

1. 何时需要调用nextNestFrame来实现动画效果？ #

当你需要确保初始样式状态已经被浏览器实际渲染到页面后，再触发基于该状态的过渡/动画时，就得用nextNestFrame。

拿示例里的场景来说：先给元素加.before类（设为红色），紧接着要移除这个类并加.active类触发过渡。如果只用一层requestAnimationFrame（也就是nextFrame），浏览器可能会把“添加.before再移除”的操作合并优化，直接跳到最终的.active状态——因为没有初始状态到目标状态的真实变化，过渡动画就不会触发。

而nextNestFrame是嵌套两层requestAnimationFrame：

• 第一层rAF会等待当前帧的重绘完成，确保.before的样式已经实实在在渲染到页面
• 第二层rAF在下一帧的重绘前执行样式修改，这时候切换到.active类，就能因为有明确的状态变化，正常触发过渡动画

总结来说：当你需要让两次样式修改分别落在两个独立的渲染帧里，保证前一次样式完全生效后再触发后续动画，就用nextNestFrame。

2. requestAnimationFrame里修改节点样式，是立即生效还是在下一帧生效？ #

requestAnimationFrame的回调会在当前帧的重绘阶段之前执行，但回调里的样式修改不会立即生效。

浏览器会把同一帧内（包括rAF回调里）的所有样式修改批量收集，统一完成样式计算、布局、绘制后，一次性更新到页面。也就是说，这些样式修改会在当前帧的重绘环节生效，而不是等到下一帧。

举个直观的例子：在rAF回调里修改元素颜色，这个颜色不会立刻在DOM上体现，但会在当前帧结束前的重绘步骤中应用到页面，用户看到的就是这一帧更新后的效果，不会延迟到下一帧。

内容的提问来源于stack exchange，提问作者Link