bootstrap进度条没有动画

Question

我已使用ruby gem在我的Rails 4应用程序中安装了引导程序。

我已将动画进度条的代码直接从bootstraps docs复制并粘贴到我的页面中：

<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 Yellow，我使用了.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);
}

<强> Demo Here

Answer 2

将class="bar"替换为class="progress-bar"。

Answer 3

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

Answer 4

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

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

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