bootstrap进度条没有动画

时间:2014-05-15 21:13:59

标签: twitter-bootstrap twitter-bootstrap-3

我已使用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变量中更改了条形图的颜色。

为什么不动画?

修改

我的酒吧看起来像什么: broken progress bar

修改

以下是我使用active类时应用的CSS: enter image description here

4 个答案:

答案 0 :(得分:8)

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

使用Chrome浏览器的yellow。如果我们在Photoshop中使用该颜色,然后在其上放置.15不透明度的白色条纹,则不可见。我已将轮廓放在此处,以便您可以看到条纹的位置。

enter image description here

因此,对于某些颜色,您可能需要调整条纹颜色的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

答案 1 :(得分:2)

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

答案 2 :(得分:1)

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

答案 3 :(得分:0)

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

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

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