父母的风格取决于孩子的动态价值

阿列克谢·达明(Alexei Darmin)

我正在使用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过渡。尽管这可能可以解决我的确切问题,但无法解决孩子/父母的依赖性。

萨布丽娜

我看着MutationObserversetInterval()等,没有什么是超优雅还是简单够你在做什么。如果您不反对添加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-width3em,除去%从标签符号,并将其传递到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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何使一个Div的职位(不是孩子或父母)完全链接/取决于另一个Div的职位?

来自分类Dev

Sass,给父母和孩子一样的风格

来自分类Dev

风格只取决于头等舱吗?

来自分类Dev

Angularjs ng-repeat 风格化取决于先前的值

来自分类Dev

jQuery动态绑定.on()选择父母还是孩子?

来自分类Dev

从父母到孩子的动态道具绑定

来自分类Dev

Mojolicious动态路线动作取决于状态

来自分类Dev

动态字段取决于WTForms的先前字段

来自分类Dev

动态更改UITextField宽度取决于内容

来自分类Dev

动态子集取决于R中的值

来自分类Dev

动态内容取决于工作日

来自分类Dev

动态内容取决于CSS类

来自分类Dev

CardView动态阴影不仅取决于仰角

来自分类Dev

动态更改UITextField宽度取决于内容

来自分类Dev

如何将价值从Boostrap模态孩子传递给父母?

来自分类Dev

Cerberus模式验证依赖关系取决于自身价值

来自分类Dev

未来的价值取决于它是否已绑定到变量?

来自分类Dev

取决于 Frontmatter 标头及其价值的复杂集合?

来自分类Dev

使用动态身高父母时如何阻止孩子修剪?

来自分类Dev

UIScrollview动态内容的大小取决于项目数

来自分类Dev

具有取决于ID的动态success_url的DeleteView

来自分类Dev

动态订阅取决于流星中的当前时间

来自分类Dev

动态Querydsl筛选器谓词取决于搜索结果

来自分类Dev

动态php标题取决于页面ID和“ if(isset)”的使用

来自分类Dev

PHP / SQL动态菜单(取决于不同的表)

来自分类Dev

动态时间间隔并取决于DisabledTimeIntervals-settings的表单

来自分类Dev

动态导入:导入css模块,具体取决于

来自分类Dev

事件取决于jQuery上的动态变量

来自分类Dev

动态列名称取决于查询结果的单行

Related 相关文章

  1. 1

    如何使一个Div的职位(不是孩子或父母)完全链接/取决于另一个Div的职位?

  2. 2

    Sass,给父母和孩子一样的风格

  3. 3

    风格只取决于头等舱吗?

  4. 4

    Angularjs ng-repeat 风格化取决于先前的值

  5. 5

    jQuery动态绑定.on()选择父母还是孩子?

  6. 6

    从父母到孩子的动态道具绑定

  7. 7

    Mojolicious动态路线动作取决于状态

  8. 8

    动态字段取决于WTForms的先前字段

  9. 9

    动态更改UITextField宽度取决于内容

  10. 10

    动态子集取决于R中的值

  11. 11

    动态内容取决于工作日

  12. 12

    动态内容取决于CSS类

  13. 13

    CardView动态阴影不仅取决于仰角

  14. 14

    动态更改UITextField宽度取决于内容

  15. 15

    如何将价值从Boostrap模态孩子传递给父母?

  16. 16

    Cerberus模式验证依赖关系取决于自身价值

  17. 17

    未来的价值取决于它是否已绑定到变量?

  18. 18

    取决于 Frontmatter 标头及其价值的复杂集合?

  19. 19

    使用动态身高父母时如何阻止孩子修剪?

  20. 20

    UIScrollview动态内容的大小取决于项目数

  21. 21

    具有取决于ID的动态success_url的DeleteView

  22. 22

    动态订阅取决于流星中的当前时间

  23. 23

    动态Querydsl筛选器谓词取决于搜索结果

  24. 24

    动态php标题取决于页面ID和“ if(isset)”的使用

  25. 25

    PHP / SQL动态菜单(取决于不同的表)

  26. 26

    动态时间间隔并取决于DisabledTimeIntervals-settings的表单

  27. 27

    动态导入:导入css模块,具体取决于

  28. 28

    事件取决于jQuery上的动态变量

  29. 29

    动态列名称取决于查询结果的单行

热门标签

归档