bootstrap进度条没有动画

Question

我Rails 4使用ruby gem为我的应用程序安装了bootstrap .

我已经直接从bootstraps文档复制并粘贴了动画进度条的代码到我的页面中:

<div class="progress progress-striped active">
   <div class="progress-bar"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
      <span class="sr-only">45% Complete</span>
   </div>
</div>

但酒吧不是动画.我唯一能想到的是我在sass变量中更改了条形图的颜色.

为什么不动画？

编辑

我的酒吧看起来像什么:

编辑

这是我使用active该类时应用的CSS :

Answer 1

只是半透明的白色条纹(rgba(255,255,255,.15))没有出现在某些颜色上.

拿Chrome浏览器吧yellow.如果我们在Photoshop中使用该颜色,然后在其上放置.15不透明度的白色条纹,则不可见.我把这个轮廓放在这里,这样你就可以看到条纹的位置了.

因此,对于某些颜色,您可能需要调整条纹颜色的alpha.我添加了一个类.progress-bar-primary的.progress-bar,以类似的方式如何,你要补充.progress-bar-warning等.

<div class="progress progress-striped active">
  <div class="progress-bar progress-bar-primary"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

然后.progress-bar-primary,只需根据您的喜好更改条纹的alpha.对于Chrome黄色,我使用了0.75不透明度.

.progress-bar-primary {
  background-color: yellow;
}

.progress-striped .progress-bar-primary {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, .75)   25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, .75) 75%, transparent 75%, transparent);
}

在这里演示