Question

我正在查看http://v4-alpha.getbootstrap.com/components/progress/

上的文件

它在那里不起作用，并且在我正在构建的网站上不起作用。

有没有其他人遇到过这个或这是一个错误？

Answer 1

看起来这是一个未解决的问题：https://github.com/twbs/bootstrap/issues/17148

作为一种解决方法，有人建议手动设置动画，如下所示：

$("#progressbar")
  .animate({
    "width": data["percent"]+"%"
  }, {
    duration: 600,
    easing: 'linear'
  });

Answer 2

[animated] ='true'启用进度条动画。检查进度条，您可以看到带有下面的CSS代码的带有进度条动画的CSS类

animation: 1s linear infinite progress-bar-stripes;

您只需添加以上行并检查。

例如进度栏示例

<p><ngb-progressbar type="warning" [value]="75" [striped]="true" [animated]="true"><i>50%</i></ngb-progressbar></p>

检查您会得到

<div aria-valuemin="0" role="progressbar" class="progress-bar bg-warning progress-bar-animated progress-bar-striped" aria-valuenow="75" aria-valuemax="100" style="width: 75%;"><!----><i _ngcontent-c2="">50%</i></div>

具有以下链接的最新文档： https://ng-bootstrap.github.io/#/components/progressbar/examples

为什么BootStrap 4进度条没有动画效果

2 个答案: