如何让进度条动画在onload加载动画完成后执行？

核心问题分析 #

加载动画结束后进度条未执行，本质是加载容器隐藏时，进度条的CSS动画没被重新触发——初始页面渲染时，进度条动画可能在加载动画遮挡期间被浏览器优化跳过，或是因为加载容器的隐藏逻辑导致进度条元素未完成正确渲染，动画从未启动。

具体修复步骤 #

1. 用JS监听加载动画结束，手动触发进度条动画 #

不要依赖CSS自动隐藏加载容器，改用JavaScript监听加载动画的结束事件，在回调里处理加载容器隐藏，同时主动触发进度条动画：

const loader = document.querySelector('.loader');
const progressBar = document.querySelector('.progress-bar');

// 监听加载动画结束事件
loader.addEventListener('animationend', () => {
  // 隐藏加载器
  loader.style.display = 'none';
  // 先移除动画类，再重新添加（强制浏览器重新执行动画）
  progressBar.classList.remove('animate-progress');
  // 延迟确保DOM更新后再添加类
  setTimeout(() => {
    progressBar.classList.add('animate-progress');
  }, 10);
});

2. 调整CSS，用类控制进度条动画 #

把进度条的动画改为类触发，而非页面加载时自动执行：

.progress-bar {
  width: 0;
  height: 5px;
  background: #007bff;
}

.animate-progress {
  animation: progress 3s linear forwards;
}

@keyframes progress {
  from { width: 0; }
  to { width: 100%; }
}

3. 优化加载容器的隐藏方式 #

如果加载容器是全屏固定定位，隐藏时建议用visibility: hidden + pointer-events: none，或是直接移除元素，避免残留的渲染上下文影响进度条：

// 替代直接display:none的隐藏方式
loader.style.visibility = 'hidden';
loader.style.pointerEvents = 'none';

关键原理 #

CSS动画在元素首次渲染时仅执行一次，当元素处于不可见状态时，浏览器会跳过动画以优化性能。通过JS在加载动画结束后手动切换进度条的动画类，强制浏览器重新触发动画流程。

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