Javascript 父样式取决于子样式'；s动态值

我用的是一个数字。看见我有一套引导，我想动画的数字显示和宽度的酒吧

标记：

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

现在我需要在

进度条中设置
style=“width”
的动画。如何使宽度取决于
span.js countup
中的值，以便随着数字的增加，父对象的宽度也会增加

编辑在跨度内应用计数的数字，如so
0到80%

编辑一个骇人的解决方案是触发一个与倒计时相同持续时间的条形宽度上的CSS3转换。虽然这可能解决了我的确切问题，但它不能回答孩子/父母的依赖性。
我已经研究了
MutationObserver
，
setInterval（）
，等等。对于您正在做的事情来说，没有什么是非常优雅或简单的。如果您不反对添加jQuery插件，请尝试一下。它监视元素对属性、属性、HTML等的更改

以下内容将使您开始学习，但您可能希望对其稍加改进。开始时有点紧张：

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

删除进度条上的初始宽度会有所帮助，但您应该根据设置
min width
，以便百分比始终具有背景

，但它在Chrome中不起作用，因为我已经直接链接到GitHub上的原始文件（Firefox和Safari工作正常）

编辑：我已经使用
最小宽度
3em
，从标签中删除了
%
符号，并将其作为后缀传递到
CountUp（）
中，这样您就不会在进度条上看到空白百分比
CountUp（）
现在看起来像这样：

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

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


HTML

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

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时抛出错误。通过一些基本的错误预防和更大粒度的持续时间数据属性。
我认为您选择的插件没有捕获每个步骤和更新任何元素的选项。我也不这么认为，我在他们的Github页面上打开了一个问题/功能请求。但与此同时，我希望有一种通过javascript/jQuery实现依赖性的好方法，这种方法不会占用太多内存。jQuery-Watch绝对是解决创建依赖性这一一般问题的解决方案。然而对于一个动画来说，当数字变化很快时，它似乎太占用CPU了，所以我觉得这个插件最适合用于那些变化不太快的数字。为了创建平滑的动画，我决定使用持续时间相等的过渡作为倒计时函数。那是个不错的选择。在我发布了我的答案并对此有了很好的了解之后，我看到了你关于使用过渡的编辑。这是一种合乎逻辑的做法。感谢您接受我的回答：）我添加了一个CSS动画解决方案。希望我没有越界，只是觉得它可能会对其他遇到这个问题的人有用。我刚刚意识到你已经提供了一个指向CSS方法的链接。我会把我的留给路人，但我很抱歉没有早点看到你的。它们几乎是一样的，只是有一些小的语法差异。您在count变量上使用
toString（）
有什么原因吗？我之前遇到过类似
count+'%'
的问题，它会抛出错误，从那时起，我就用
toString（）
来避免它，但如果不需要它，我会停止使用它。我认为添加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;
}

$.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();
});