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

Question

When a user scroll to certain element on my page I add class which starts an animation of the width of it. I starts of with a width of 0% then goes up to 99% for example. As this animates is there a way to display this width incrementing in the page in HTML ie a <p> tag with this value incrementing? The CSS is just this, I add the class .active when the user scrolls to it with 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;
}

Answer 1

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

This sets the paragraphs content to the div's width every 20 ms.

Answer 2

The simplest way would be to animate the element width using jQuery .animate() and reading the current width from the step: parameter callback (Read the Docs)...

Using CSS3 transition:

 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"); // <<---------------- }); 

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

 <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> 

---

When transitionstart will be implemented by all major browsers than the code would look pretty much like:

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

Probably some day in another galaxy some event like transitionstep could be all it takes....

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