bootstrap进度条没有动画

Question

我使用ruby gem在我的Rails 4应用程序中安装了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);
}

在这里演示

Answer 2

用class="progress-bar"替换class="bar" class="progress-bar" 。

Answer 3

将关键帧css放在css文件的顶部，而不是嵌套（如果使用sass），不要在媒体查询中添加它。

Answer 4

您是否真的尝试将更改恢复为颜色？ 如果不是，可能值得尝试，看看它是否是你的问题。

如果那样的话，我建议你应该将它默认为库存，然后单独隔离它，看看它是怎么回事。 它可能是html中其他内容或其他内容混淆的问题，因此如果您将其加载到具有库存设置的空白文档中。

我现在无法想到其他任何事情。 我希望它有效。