我正在使用countUp,它最多计数一个数字。参见演示。我有一组Bootstrap进度栏,我希望为显示的数字和栏的宽度设置动画。
标记:
<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>%
编辑一个有问题的解决方案是在与countUp相等的持续时间的小节宽度上触发CSS3过渡。尽管这可能可以解决我的确切问题,但无法解决孩子/父母的依赖性。
我看着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] + '%');
}
});
删除进度条上的初始宽度会有所帮助,但是您应min-width
按照Bootstrap文档中的进度条标签设置a ,以便该百分比始终具有背景。
这对您来说是个小提琴,但是它在Chrome中不起作用,因为我已直接链接到GitHub上的原始文件(Firefox和Safari可以正常工作)。
编辑:我已经更新了小提琴用min-width
的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>
的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:如果值为null或0,countUp.js将引发错误。这是更新的小提琴,提供了一些基本的错误预防功能,并添加了duration数据属性以提高粒度。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句