如何为多步骤进度条实现translateX填充动画 替换默认淡入过渡效果

核心修改逻辑 #

原有实现靠切换进度条背景色实现状态切换，呈现淡入效果。我们拆分「灰色轨道」和「激活进度条」两个功能模块：

• 固定轨道为灰色不变
• 激活状态的进度条默认通过translateX移出轨道可见区域，激活时平移到可视区域，实现逐步滑动填充的效果

完整修改后的CSS代码 #

.progressbar li {
  list-style-type: none;
  width: 20%;
  float: right;
  font-size: 12px;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  color: #7d7d7d;
}
.progressbar li:before {
  width: 22px;
  height: 22px;
  content: '';
  line-height: 30px;
  border: 2px solid #7d7d7d;
  background-color: #7d7d7d;
  display: block;
  text-align: center;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  transition: all .8s;
}
/* 进度条轨道固定为灰色，新增overflow:hidden隐藏超出的进度部分 */
.progressbar li:after {
  width: 100%;
  height: 7px;
  content: '';
  position: absolute;
  background-color: #7d7d7d;
  top: 7px;
  right: -50%;
  z-index: -1;
  overflow: hidden;
}
/* 新增激活进度条样式，默认隐藏在轨道左侧 */
.progressbar li:after::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #55b776;
  transform: translateX(-100%);
  transition: transform 0.3s ease-in;
}
.progressbar li:first-child:after {
  content: none;
}
.progressbar li:first-child:before {
margin-top : 5px;
}
.progressbar li.active:before {
  border-color: #55b776;
  background-color: #55b776;
  transition: all .8s;
}
/* 激活时进度条平移进入可视区域 */
.progressbar li.active:after::before {
  transform: translateX(0);
}

注意事项 #

• 如果你的步骤是常规从左到右排列，可将.progressbar li的float: right改为float: left，同时将.progressbar li:after的right: -50%改为left: -50%，滑动方向会更符合使用习惯
• 如果需要兼容不支持伪元素嵌套的低版本浏览器，可在每个li内部新增<span class="progress-line"></span>元素，将.progressbar li:after::before的样式迁移到.progress-line上，逻辑完全一致

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