css - 简单过渡不适用于进度条

Question

我正在尝试创建一个简单的进度条，它会显示进度条过渡中的动画。我正在尝试使用 css 过渡属性，但无法实现过渡。

https://jsfiddle.net/kv7ohehg/

.progress-bar_wrapper {
  width: 100%;
  height: 20px;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.progress-bar {
  background: blue;
  width: 0%;
  height: 20px;
  transition-property: width;
  transition-duration: 20s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

<div class="progress-bar_wrapper">
  <div class="progress-bar" style="width:60%">
  </div>
</div>

Answer 1

那是因为当页面首次加载时，您并没有在“状态”之间转换，而是在页面加载时使用内联样式简单地覆盖了宽度。如果您希望进度条显示动画状态，请改用 CSS 动画:

.progress-bar {
  background: blue;
  height: 20px;
  animation: load 20s linear 1s;
  animation-fill-mode: forwards;
  width: 0%;
}

@keyframes load {
    from { width: 0%; }
    to   { width: 60%; }
}

概念验证示例:

.progress-bar_wrapper {
  width: 100%;
  height: 20px;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.progress-bar {
  background: blue;
  height: 20px;
  animation: load 20s linear 1s;
  animation-fill-mode: forwards;
  width: 0%;
}

@-webkit-keyframes load {
  from {
    width: 0%;
  }
  to {
    width: 60%;
  }
}

@keyframes load {
  from {
    width: 0%;
  }
  to {
    width: 60%;
  }
}

<div class="progress-bar_wrapper">
  <div class="progress-bar">
  </div>
</div>

---

或者，您可以使用基于 JS 的方法来触发宽度的变化。但是，这应该被视为最后的努力，因为您真正应该做的是使用 CSS 动画来代替 :) 除非您还想支持无法识别它的浏览器。

window.setTimeout(function() {
  document.querySelector('.progress-bar').style.width = '60%';
}, 1000);

.progress-bar_wrapper {
  width: 100%;
  height: 20px;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.progress-bar {
  background: blue;
  width: 0%;
  height: 20px;
  transition-property: width;
  transition-duration: 20s;
  transition-timing-function: linear;
}

<div class="progress-bar_wrapper">
  <div class="progress-bar">
  </div>
</div>