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宽度。

Answer 2

最简单的方法是使用jQuery .animate()设置元素宽度的动画，并从step:参数回调中读取当前宽度（阅读文档）......

使用CSS3过渡：

＆＃13;

var $bar = $("#bar"),
    $currWidth = $("#currWidth"),
    itv = null;

$("#bar").on({
  // START COUNTING THE WIDTH
  // I used a custom "start" event cause currently (2016) 
  // Event.transitionstart is implemented only in IE10+, Edge
  start : function(){
    $(this).addClass("active");
    itv = setInterval(function(){
      $currWidth.text($bar[0].offsetWidth);
    },10);
  },
  // STOP COUNTING THE WIDTH
  transitionend : function() {
    clearInterval(itv);
    $currWidth.text("INTERVAL STOPPED");
  }
});


$("#start").on("click", function(){ // CLICK JUST FOR DEMO,
  // You need to place this trigger inside your inViewport method
  // when the element enters the viewport
  $bar.trigger("start"); // <<---------------- 
});

＆＃13;

#bar{
  height: 20px;
  width:0;
  background:red;
  transition: 3s;
}
#bar.active{
  width:100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="start">ACTIVATE BAR</button><!-- TRIGGER BUTTON JUST FOR DEMO -->

width <span id="currWidth">0</span>
<div id="bar"></div>

＆＃13;

当所有主要浏览器都实现transitionstart时，代码看起来非常像：

var itv;

$("#bar").on({
  transitionstart: function(){
    itv = setInterval(function(){
      console.log( $bar[0].offsetWidth );
    },10);
  },
  transitionend : clearInterval(itv)
});

$("#bar").addClass("active"); // place this call where needed

可能有一天，在另一个星系中，像transitionstep这样的事件可能只需要...... {/ p>

$("#bar").on("transitionstep", function(){ // :( 
   console.log( this.offsetWidth );
});

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

2 个答案: