Javascript + CSS动画无法正常工作，可能是什么原因造成的？

Question

我正在开发页面进度加载器，我想为整个进度设置宽度动画，但是我没有任何运气。请参阅下文，我们将不胜感激。

https://jsfiddle.net/nbx9dwzL/

HTML

<div id="page-progress-bar-top"></div>

Javascript

var pageProgressBarTop = document.getElementById("page-progress-bar-top")
pageProgressBarTop.classList.add("complete")

CSS

#page-progress-bar-top{
  position:absolute;
  height:4px;
  background:#12ADFD;
  z-index:100;
  -webkit-transition: all 3s;
  -moz-transition: all 3s;
  -ms-transition: all 3s;
  -o-transition: all 3s;
  transition: all 3s;
  -webkit-box-shadow: 0px 2px 7px 0px rgba(179,179,179,0.82);
  -moz-box-shadow: 0px 2px 7px 0px rgba(179,179,179,0.82);
  box-shadow: 0px 2px 7px 0px rgba(179,179,179,0.82);
}
#page-progress-bar-top.complete{
  width:100%;
}

Answer 1

您没有initial width，并且[width元素的默认 <div>为100%（它是一个块元素）。

要查看过渡，您想应用width，例如1px开头：

document.addEventListener("click", function() {
  var pageProgressBarTop = document.getElementById("page-progress-bar-top")
  pageProgressBarTop.classList.add("complete")
});

#page-progress-bar-top {
  width: 1px;
  position: absolute;
  height: 4px;
  background: #12ADFD;
  z-index: 100;
  -webkit-transition: all 3s;
  -moz-transition: all 3s;
  -ms-transition: all 3s;
  -o-transition: all 3s;
  transition: all 3s;
  -webkit-box-shadow: 0px 2px 7px 0px rgba(179, 179, 179, 0.82);
  -moz-box-shadow: 0px 2px 7px 0px rgba(179, 179, 179, 0.82);
  box-shadow: 0px 2px 7px 0px rgba(179, 179, 179, 0.82);
}

#page-progress-bar-top.complete {
  width: 100%;
}

<div id="page-progress-bar-top"></div>

可以在here上看到它。