动画百分比栏的百分比＆＃34;在过渡期间

Question

我已经使用HTML，CSS和JS创建了一个非常基本的动画百分比栏，唯一的问题是我正在设法制作增加动画的方法和/或减少百分比输出以配合动画百分比条。在下面的示例中以及 JsFiddle 中，我已成功创建了唯一的问题，即它似乎不是最有效或最有效的方法。< / p>

在下面的代码片段中，我通过......创建了这个动画效果。

1. 将x设置为等于setInterval
2. 捕获左侧百分比条的宽度，并从字符串末尾删除px。
3. 捕获右侧百分比条的宽度，并从字符串末尾删除px。
4. 显示工具提示中左侧（蓝色）条的百分比值，可以在悬停时看到。
5. 显示工具提示中右侧（红色）条的百分比值，可以在悬停时看到。
6. 显示百分比栏下方左侧（蓝色）栏的百分比值。
7. 显示百分比栏下方右侧（红色）栏的百分比值。
8. 以下所有代码都会每隔64毫秒运行一次。
9. 此代码仅运行2000毫秒，这与我为百分比条设置转换的时间相同。

注意：以下代码的重点是给出一个错觉，即百分比值随着百分比栏的增加而增加。简而言之，目标是让它看起来更加生动，而不是突然看到数字从一个数字跳到下一个数字。

必须有更好的方法来实现相同的效果（或更好），而不是每隔DOM毫秒从64提取数据。网上有大量的实时图表可以达到同样的效果，但我无法弄清楚我是如何想出自己的，并且真的不认为他们这样做了这样也是。有任何想法吗？？？我只想使用没有jQuery等库的纯Javascript。

  var x = setInterval(function() {
    var left = parseInt(window.getComputedStyle(p_bar_left).getPropertyValue('width').replace(/px/i, '')) / (parseInt(window.getComputedStyle(p_bar_left).getPropertyValue('width').replace(/px/i, '')) + parseInt(window.getComputedStyle(p_bar_right).getPropertyValue('width').replace(/px/i, ''))) * 100;
    var right = parseInt(window.getComputedStyle(p_bar_right).getPropertyValue('width').replace(/px/i, '')) / (parseInt(window.getComputedStyle(p_bar_left).getPropertyValue('width').replace(/px/i, '')) + parseInt(window.getComputedStyle(p_bar_right).getPropertyValue('width').replace(/px/i, ''))) * 100;
    p_bar_left.querySelector('.percent-value').innerText = left.toFixed(2) + '%';
    document.querySelector('#blue').querySelector('.percent-amount').innerText = left.toFixed(2) + '%';
    p_bar_right.querySelector('.percent-value').innerText = right.toFixed(2) + '%';
    document.querySelector('#red').querySelector('.percent-amount').innerText = right.toFixed(2) + '%';
  }, 64);
  setTimeout(function() {
    clearInterval(x)
  }, 2000);

＆＃13;
＆＃13;
var good = document.querySelector('#good');
var bad = document.querySelector('#bad');
var p_bar_left = document.querySelector('#progressbar-left');
var p_bar_right = document.querySelector('#progressbar-right');
var counter_left = 0;
var counter_right = 0;
var percent_left = 0;
var percent_right = 0;

function changePercent(increment, which) {
  if (which == 'left') {
    counter_left += increment;
  } else if (which == 'right') {
    counter_right += increment;
  } else {
    throw "Don't know which value to increase.";
  }
  percent_left = (counter_left / (counter_left + counter_right)) * 100;
  percent_right = (counter_right / (counter_left + counter_right)) * 100;
  p_bar_left.style.width = percent_left + '%';
  p_bar_right.style.width = percent_right + '%';
  document.querySelector('#total-amount').innerText = counter_right + counter_left;

  var x = setInterval(function() {
    var left = parseInt(window.getComputedStyle(p_bar_left).getPropertyValue('width').replace(/px/i, '')) / (parseInt(window.getComputedStyle(p_bar_left).getPropertyValue('width').replace(/px/i, '')) + parseInt(window.getComputedStyle(p_bar_right).getPropertyValue('width').replace(/px/i, ''))) * 100;
    var right = parseInt(window.getComputedStyle(p_bar_right).getPropertyValue('width').replace(/px/i, '')) / (parseInt(window.getComputedStyle(p_bar_left).getPropertyValue('width').replace(/px/i, '')) + parseInt(window.getComputedStyle(p_bar_right).getPropertyValue('width').replace(/px/i, ''))) * 100;
    p_bar_left.querySelector('.percent-value').innerText = left.toFixed(2) + '%';
    document.querySelector('#blue').querySelector('.percent-amount').innerText = left.toFixed(2) + '%';
    p_bar_right.querySelector('.percent-value').innerText = right.toFixed(2) + '%';
    document.querySelector('#red').querySelector('.percent-amount').innerText = right.toFixed(2) + '%';
  }, 64);
  setTimeout(function() {
    clearInterval(x)
  }, 2000);
}

good.addEventListener('click', function() {
  changePercent(1, 'left');
});
bad.addEventListener('click', function() {
  changePercent(1, 'right');
});

var tooltip = document.querySelectorAll('.tooltip');
var tooltipelement = document.querySelectorAll('#progressbar-left, #progressbar-right');

for (var x = tooltipelement.length; x--;) {
  tooltipelement[x].addEventListener('mousemove', function(e) {
    for (var i = tooltip.length; i--;) {
      tooltip[i].style.left = e.pageX + 20 + 'px';
      tooltip[i].style.top = e.pageY + 'px';
    }
  });
}
＆＃13;
#progressbar-container {
  display: flex;
  position: relative;
  width: 50vw;
  height: 32px;
  border: 2px solid black;
  background-color: #ccc;
  justify-content: space-between;
}

#progressbar-left {
  position: relative;
  height: 100%;
  background-color: blue;
  transition: width 2s;
  align-items: center;
  justify-content: center;
}

#progressbar-right {
  position: relative;
  height: 100%;
  background-color: red;
  transition: width 2s;
  align-items: center;
  justify-content: center;
}

.tooltip {
  display: none;
  position: fixed;
  width: auto;
  height: auto;
  padding: 6px;
  background-color: black;
  text-align: center;
  border-radius: 6px;
  z-index: 1;
}

.object {
  display: inline-block;
  color: #fff;
}

.percent-value {
  display: inline-block;
  color: #fff;
}

#progressbar-left:hover .tooltip {
  display: block;
}

#progressbar-right:hover .tooltip {
  display: block;
}

#total {
  display: block;
  font-weight: bold;
}

#total-amount {
  display: inline-block;
  font-weight: normal;
}

#blue,
#red {
  display: block;
  font-weight: bold;
}

.percent-amount {
  display: inline-block;
  font-weight: normal;
}
＆＃13;
<body>
  <input type="button" value="Good" id="good">
  <input type="button" value="Bad" id="bad">
  <div id="progressbar-container">
    <div id="progressbar-left">
      <div class="tooltip">
        <span class="tooltiptext">
          <span class="object">Blue</span>
        <span class="percent-value"></span>
        </span>
      </div>
    </div>
    <div id="progressbar-right">
      <div class="tooltip">
        <span class="tooltiptext">
          <span class="object">Red</span>
        <span class="percent-value"></span>
        </span>
      </div>
    </div>
  </div>
  <span id="total">Total: <p id="total-amount">0</p></span>
  <span id="blue">Percent Blue: <p class="percent-amount">0%</p></span>
  <span id="red">Percent Red: <p class="percent-amount">0%</p></span>
</body>
＆＃13;
＆＃13;
＆＃13;

JsFiddle