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

你没有初始 width ，以及默认 width对于 <div>元素是 100% (这是一个 block 元素)。

要查看转换，您要应用 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 .