How do I animate the change of the width of a div in JavaScript?-CodePudding

I have some sort of poll where you vote either YES and NO and based on the votes it creates a poll chart (by creating two divs inside another div that has a set width and setting the width of the first two divs the percentage of YES and NO votes out of the total votes). You can see the project for a better understanding by clicking HERE.

I want it to appear animated as if it were in CSS with transition: width 100ms linear; just like here:

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
    <style>
        .poll{
            height: 50px;
            width: 300px;
            background-color: black;
            transition: all 300ms;
        }
        .poll:hover{
            width: 500px;
        }
    </style>
</head>
<body>
    <div ></div>
</body>
</html>

However, whenever I add something similar to the class of my divs I see no change. The divs in question are created in this function:

function renderPoll(){
container.innerHTML=''; //reset container
let poll1 = document.createElement('div');
let poll2 = document.createElement('div');

poll1.classList.add('poll-attr');
poll2.classList.add('poll-attr');

let innerTextPoll = Math.round(calcPerc()); //calcPerc() calculates the percent of YES votes with the equation percentage = (100*NumberOfYES)/NumberOfVotes
poll1.style.width = calcPerc()   '%';
poll2.style.width = 100-calcPerc()   '%';

poll1.innerText = innerTextPoll   '%';
poll2.innerText = 100-innerTextPoll   '%';

container.appendChild(poll1);
container.appendChild(poll2);

}

I am not nearly experienced enough to figure this out so any input is appreciated!

CodePudding user response：

You can do it easily like this:

function animation () {
  let id = null;
  const elem = document.querySelector(".poll");   
  let width = 300; // default width
  clearInterval(id);
  id = setInterval(frame, 5); // changing the number will effect the speed of the animation
  function frame() {
    if (width == 500) { // if the width is 500px, then finish animation
      clearInterval(id); // finish animation
    } else {
      width  ; 
      elem.style.width = width   "px"; 
    }
  }
}

CodePudding user response：

Bulding on your code and @Noel Maróti answer, indeed all you have to do is set interval for animating the polls after you add them to the container.

function renderPoll() {
  container.innerHTML = ''; //reset container
  let poll1 = document.createElement('div');
  let poll2 = document.createElement('div');

  poll1.classList.add('poll-attr');
  poll2.classList.add('poll-attr');

  let innerTextPoll = Math.round(calcPerc()); //calcPerc() calculates the percent of YES 
  poll1.innerText = innerTextPoll   '%';
  poll2.innerText = 100 - innerTextPoll   '%';

  container.appendChild(poll1);
  container.appendChild(poll2);

  var target_length = 300;

  animation(poll1, 0, (calcPerc()) * target_length / 100);
  animation(poll2, 0, (100 - calcPerc()) * target_length / 100);

}

function calcPerc() {
  return 75;
}

function animation(elem, from, to) {
  let id = null;
  let width = from || 0;
  var speed = 2.5;
  requestAnimationFrame(frame);

  function frame() {
    if (width < to) {
      width  = speed;
      elem.style.width = width   "px";
      requestAnimationFrame(frame);
    }
  }
}


renderPoll();

.poll-attr {
  border: 1px solid blue;
  height: 50px;
  background: lightyellow;
}

.poll {
  height: 50px;
  width: 300px;
  background-color: black;
  transition: all 300ms;
}

.poll:hover {
  width: 500px;
}

<div ></div>
<div id="container"></div>