javascript - 在 CSS 过渡期间显示元素的大小值

Question

当用户滚动到我页面上的某个元素时，我添加了类，该类会启动其宽度的动画。例如，我从 0% 的宽度开始然后上升到 99%。因为这个动画有没有办法在 HTML 中显示页面中的宽度递增，即 <p>这个值递增的标签？CSS 就是这样，当用户使用 Javascript 滚动到它时，我添加类 .active。

.graph-horiz-bar__bar{
  background:$niagara;
  top:0px;
  position:absolute;
  left:0px;
  width:0;
  height:100%;
  transition: width 0.3s;
}
.graph-horiz-bar__bar.active{
  width:100%;
  transition: width 0.3s;
}

Answer 1

var div = document.getElementById("yourDiv"), parapgraph = document.getElementById("yourParagraph");  
setInterval(function(){
    paragraph.innerHTML = div.offsetWidth + "px";
}, 20);

每 20 毫秒将段落内容设置为 div 的宽度。