Question

我正在使用countUp，它最多可以计算一个数字。见demo。我有一套Bootstrap progress bars，我想要显示所显示的数字和条形的宽度。

标记：

<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
    <span class="js-countup" data-count="80"></span>%
  </div>
</div>

数字动画很好：

$.each($('.js-countup'), function () {
  var count = $(this).data('count'),
    numAnim = new CountUp(this, 0, count);

  numAnim.start();
});

现在我需要在style="width"内为progress-bar制作动画。如何使宽度取决于span.js-countup中的值，以便数字增加，父级的宽度也会增加？

编辑计算出的数字会在范围内应用<span class="js-countup" data-count="80">0 to 80</span>%

编辑一个hacky解决方案是触发与countUp相同持续时间的条宽度上的CSS3转换。虽然这可能对我的确切问题有用，但它不会回答孩子/父母的依赖。

Answer 1

我已经查看了MutationObserver，setInterval()等等，对于您正在做的事情，没有什么是超级优雅或简单的。如果您不反对添加jQuery插件，请尝试jQuery-Watch。它会监视元素，以便更改属性，属性，HTML等。

以下内容将帮助您入门，但您可能希望将其改进为一个小问题。开始时有点跳跃：

$(".js-countup").watch({
  properties: "prop_innerHTML",
  watchChildren: true,
  callback: function (data, i) {
    $('.progress-bar').css('width',data.vals[i] + '%');
  }
});

删除进度条上的初始宽度会有所帮助，但您应根据Bootstrap's documentation for progress bar labels设置min-width，以便百分比始终具有背景。

Here's a fiddle for you，但它在Chrome中无法使用，因为我已直接链接到GitHub上的原始文件（Firefox和Safari工作正常）。

修改：我updated the fiddle min-width 3em，从标签中删除%符号并将其传递给CountUp()作为后缀，因此您的进度条上不会显示空白百分比。 CountUp()现在看起来像这样：

numAnim = new CountUp(this, 0, count, 0, 2.5, { suffix : '%' });

编辑2：这个问题对我来说有点上瘾。使用CSS动画方法，您可以通过完全消除countup元素并使用进度条上的aria属性来节省一些标记。然后，只需在启动计数器时将进度条的宽度设置为与aria-valuenow匹配。

Updated fiddle.

<强> HTML

<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
  </div>
</div>

<强> CSS

.progress-bar {
  min-width: 3em;
  -webkit-transition: width 2.5s ease-in-out;
     -moz-transition: width 2.5s ease-in-out;
       -o-transition: width 2.5s ease-in-out;
          transition: width 2.5s ease-in-out;
}

<强>的jQuery

$.each($('.progress-bar'), function () {
  var count = $(this).attr('aria-valuenow'),
    numAnim = new CountUp(this, 0, count, 0, 2.5, { suffix : '%' });
  $(this).css('width', count + '%');
  numAnim.start();
});

编辑3： countUp.js将抛出错误，如果值为null或0. Here's an updated fiddle，则会有一些基本的错误预防和添加持续时间数据属性以获得更大的粒度。< / p>

家长风格取决于孩子的动态价值

1 个答案: