React翻书组件中循环调用handleClick仅触发一次的问题

你遇到的核心问题，本质是同步批量DOM操作/状态更新与浏览器渲染机制的冲突，以及CSS动画触发条件的限制，具体原因可以拆成这几点：

• 浏览器渲染批量处理机制：浏览器会把同步任务队列里的DOM操作合并执行，不会每执行一次handleClick就立即渲染页面。你在turnPages里循环调用handleClick时，所有的类名添加/移除操作会被一次性批量处理，导致只有第一次的类名变化能触发动画，后续操作因为DOM状态还没来得及更新，无法触发新的动画。

• 组件状态更新的批量合并：如果你的handleClick依赖组件的状态（比如当前页码state），像React这类框架会把同步循环里的状态更新合并成一次。也就是说，循环里多次调用handleClick时，每次拿到的都是初始的页码值，只有第一次状态更新会生效，后续的调用因为状态没变化，翻页逻辑根本没执行。

• CSS动画的触发条件未满足：CSS过渡/动画通常需要元素状态发生可检测的变化（比如类名从无到有、从A到B）。如果前一次翻页的动画还没结束，类名还没回到初始状态，你就再次调用handleClick添加相同类名，浏览器会认为状态没有变化，不会触发新的动画。

至于你尝试的几种方法没解决问题，也对应着各自的问题：

• async/await：如果handleClick本身没有返回一个等待动画结束的Promise（比如在transitionend事件触发后resolve），单纯加async/await只是把同步函数变成异步，但还是会快速执行所有调用，没给浏览器留渲染时间。
• setTimeout递归：如果设置的时间过短，或者没有监听动画结束事件来决定下一次调用的时机，只是固定延迟，依然会出现动画未完成就执行下一次操作的情况，导致动画被中断或不触发。
• 返回Promise：如果Promise没有绑定动画结束的时机，只是在类名添加后就立即resolve，和同步调用没本质区别，还是会批量执行。

你后来改用handleTocClick直接跳转是完全合理的——目录跳转本来就不需要逐页翻的动画，直接修改到目标页码，既避免了连续动画的各种坑，也提升了用户体验。

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