react-top-loading-bar进度达100后回退至0时仍可见的原因及解决方法

我之前也碰到过这个坑，咱们来捋清楚问题出在哪，以及怎么解决：

问题根源 #

react-top-loading-bar 的 onLoaderFinished 回调触发时机是进度值刚达到100的瞬间，并不是等加载条的淡出动画完全结束。你现在的代码是在回调里立刻把进度重置为0，这会直接打断组件正在执行的淡出过渡——加载条还没来得及完成隐藏的动画，就被新的状态（progress=0）触发重新渲染，结果就是加载条没完全消失，停留在半可见状态。

修复方案 #

核心思路就是等淡出动画彻底完成后，再重置进度值。组件默认的淡出时长是500ms，所以我们只需要在回调里加个延迟，等动画跑完再调用 setProgress(0) 就行。

修改后的代码示例：

<LoadingBar 
  color="#007bff" 
  progress={this.state.progress} 
  onLoaderFinished={() => {
    // 匹配组件默认的淡出时长，等待动画结束后重置进度
    setTimeout(() => this.setProgress(0), 500);
  }} 
/>

如果你自定义了组件的 fadeOutTime 属性（比如设成了600ms），记得把setTimeout的延迟时间改成对应的数值，保证和动画时长完全匹配。

要是你不想用定时器，也可以尝试通过ref获取加载条DOM元素，监听它的动画结束事件来触发重置，但这种方式相对繁琐——定时器方案已经足够简单可靠，适合绝大多数场景。

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