How to animate from length 0 -> 100 but remove animation from 100 -> 0-CodePudding

I have this timeline

<div >
 <div >
   <div  style="width: 100%"></div>
 </div>
 <div >
   <div  style="width: 100%"></div>
 </div>
 <div >
   <div  style="width: 83%"></div>
 </div>
</div>

So the last item goes up from to 84, 85 etc. but when i reset the timeline i want to have all the items style width: 0% but then it has the transition animation so u see that it goes to 0 but it needs to go to 0 instantly and smoothly fill from 0 to 100%.

Any help is welcome!

CodePudding user response：

By reading your question what I got is you need some progressbar. You can refer to this. https://www.w3schools.com/howto/howto_js_progressbar.asp

var i = 0;
function move() {
  if (i == 0) {
    i = 1;
    var elem = document.getElementById("myBar");
    var width = 1;
    var id = setInterval(frame, 10);
    function frame() {
      if (width >= 100) {
        clearInterval(id);
        i = 0;
      } else {
        width  ;
        elem.style.width = width   "%";
      }
    }
  }
}

Basically it will modify width of your class. If you need more help on this please elaborate your requirement more with jsfiddle or any same.