我最近用HTML和JavaScript做了一个简单的进度条，页面刷新的时候动画能正常运行，但我想让它完成后从头开始无限循环，现在重复重启的功能完全没生效，麻烦大家帮忙看看问题出在哪了！

我的代码如下：

HTML #

<div class="progress-bar-container">
  <div class="progress-bar" id="progressBar"></div>
</div>

CSS #

.progress-bar-container {
  width: 100%;
  height: 3px;
  background-color: #e0e0e0;
  border-radius: 2px;
  overflow: hidden;
}

.progress-bar {
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #ff0008, #fad0c4, #ffecd2);
  transform: translateX(100%);
  transition: transform 5s linear;
}

.progress-bar.active {
  transform: translateX(0);
}

JavaScript #

const progressBar = document.getElementById('progressBar');

function startProgressBarAnimation() {
  progressBar.classList.remove('active');

  setTimeout(() => {
    progressBar.classList.add('active');
  }, 100);
}

startProgressBarAnimation();

progressBar.addEventListener('transitionend', () => {
  progressBar.style.transition = 'none';

  progressBar.style.transform = 'translateX(100%)';
  setTimeout(() => {
    progressBar.style.transition = 'transform 5s linear';
    startProgressBarAnimation();
  }, 10);
});

问题分析与解决方案 #

你当前的代码逻辑里，transitionend事件的处理有点绕，而且可能因为浏览器重绘时机的问题，导致重置动画的操作没被正确识别。这里给你两种可行的修复方案：

方案1：简化JS逻辑，强制触发重绘

我们可以去掉复杂的transition样式修改，直接通过操作类名+强制重绘来实现循环，这样更可靠：

修改后的JavaScript代码：

const progressBar = document.getElementById('progressBar');

function startProgressBarAnimation() {
  // 移除active类，让进度条回到初始位置
  progressBar.classList.remove('active');
  // 强制浏览器触发重绘，确保样式更新生效
  void progressBar.offsetWidth;
  // 重新添加active类，启动动画
  setTimeout(() => {
    progressBar.classList.add('active');
  }, 100);
}

// 初始化启动动画
startProgressBarAnimation();

// 监听动画结束事件，重启动画
progressBar.addEventListener('transitionend', startProgressBarAnimation);

方案2：改用CSS Animation（更推荐）

如果只是需要简单的无限循环，完全可以不用JavaScript监听事件，直接用CSS的animation属性，代码更简洁，也更稳定：

修改后的CSS代码：

.progress-bar-container {
  width: 100%;
  height: 3px;
  background-color: #e0e0e0;
  border-radius: 2px;
  overflow: hidden;
}

.progress-bar {
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #ff0008, #fad0c4, #ffecd2);
  /* 使用CSS动画，设置无限循环 */
  animation: progressLoop 5s linear infinite;
}

@keyframes progressLoop {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

对应的JavaScript可以完全删掉，只保留HTML结构就行——CSS会自动处理无限循环的动画！

备注：内容来源于stack exchange，提问作者DolDurma