Bootstrap 5进度条自定义动画覆盖原生动画问题求助

问题 #

• 页面加载时自定义的从0%到20%的动画覆盖了Bootstrap原生的progress-bar-animated条纹滚动动画
• 点击按钮切换进度等级时，进度条宽度跳变，没有平滑过渡效果

解决思路 #

把初始加载动画、进度宽度控制、原生条纹动画三者分离，避免样式冲突；通过CSS过渡属性实现宽度变化的平滑效果。

修改后的代码实现 #

CSS #

/* 单独的初始加载动画类，仅页面加载时触发一次 */
.init-load {
  animation: effetChargement 1s forwards;
}

/* 进度等级类只负责设置宽度，不掺杂动画 */
.level-20 {
  width: 20%;
}
.level-40 {
  width: 40%;
}
.level-60 {
  width: 60%;
}
.level-80 {
  width: 80%;
}
.level-100 {
  width: 100%;
}

/* 给进度条添加默认的宽度过渡，所有宽度变化都会平滑生效 */
.progress-bar {
  transition: width 0.5s ease;
}

@keyframes effetChargement {
  0% {
    width: 0%;
  }
  100% {
    width: 20%;
  }
}

HTML #

<div class="progress" style="height: 20px">
  <div
     id="bar"
    class="progress-bar progress-bar-striped progress-bar-animated init-load level-20"
    role="progressbar"
    aria-valuemin="0"
    aria-valuemax="100"
  ></div>
</div>
<button type="button" class="btn btn-primary my-3">Click to change level</button>

配套JavaScript逻辑 #

点击按钮切换等级时，记得移除初始加载类，防止重复触发从0开始的动画：

const bar = document.getElementById('bar');
const btn = document.querySelector('button');
const levels = ['level-20', 'level-40', 'level-60', 'level-80', 'level-100'];
let currentLevelIndex = 0;

btn.addEventListener('click', () => {
  // 移除当前等级类
  bar.classList.remove(levels[currentLevelIndex]);
  // 切换到下一个等级
  currentLevelIndex = (currentLevelIndex + 1) % levels.length;
  // 添加新等级类
  bar.classList.add(levels[currentLevelIndex]);
  // 移除初始加载类，避免后续点击重复触发初始动画
  bar.classList.remove('init-load');
});

效果说明 #

• 页面加载时，进度条会从0%平滑过渡到20%，同时保留Bootstrap原生的条纹滚动动画
• 点击按钮切换进度等级时，宽度会以0.5秒的平滑动画切换，不再生硬跳变

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