Javascript 在CSS转换期间显示元素的大小值

当用户滚动到我页面上的某个元素时，我添加了一个类，该类将启动该元素宽度的动画。例如，我以0%的宽度开始，然后上升到99%。当这个动画出现时，有没有一种方法可以在HTML页面中显示这个增加的宽度，即一个

标记，这个值增加？ CSS就是这样，我添加了class.active，当用户使用Javascript滚动到它时

.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;
}

---

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

最简单的方法是使用jQuery

.animate（）

设置元素宽度的动画，并从

步骤：

参数回调（读取文档）读取当前宽度

使用CSS3转换：

var$bar=$（“#bar”），
$currWidth=$（“#currWidth”），
itv=null；
美元（“#巴”）。在({
//开始计算宽度
//我目前使用了自定义的“启动”事件原因（2016年）
//Event.transitionstart仅在IE10+和Edge中实现
开始：函数（）{
$（此）.addClass（“活动”）；
itv=设置间隔（函数（）{
$currWidth.text（$bar[0].offsetWidth）；
},10);
},
//停止计算宽度
transitionend:function（）{
clearInterval（itv）；
$currWidth.text（“间隔停止”）；
}
});
$（“#开始”）。在（“单击”，function（）{//单击仅用于演示，
//您需要将此触发器放在您的inViewport方法中
//当元素进入视口时
$bar.trigger（“start”）；//
document.getElementById（“yourDiv”）.width
？另外，每隔20毫秒查询DOM中的一个元素是一个非常糟糕的主意。再次……小心
element.width
返回
未定义的
…而且在一段时间后停止该间隔会非常酷，你不觉得吗？（并不是说在需要时启动它会很好，至少）不，它不是固定的。它是错误的：
style.width
将返回
”
@Roko C.Buljan现在是：）现在，建议从一个函数中触发间隔，该函数注册元素为inViewport，而不应该使用
transitionId
事件停止间隔。jQuery很容易在（“Transitiononend，stopMyInterval）
var div = document.getElementById("yourDiv"), parapgraph = document.getElementById("yourParagraph");  
setInterval(function(){
    paragraph.innerHTML = div.offsetWidth + "px";
}, 20);