twitter-bootstrap 引导进度条没有动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23688753/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap progress bar not animating
提问by Deekor
I've installed bootstrap to my Rails 4application using the ruby gem.
我已经Rails 4使用ruby gem为我的应用程序安装了引导程序。
I have copied and pasted the code for an animated progress bar straight from bootstraps docsinto my page:
我已将动画进度条的代码直接从引导程序文档复制并粘贴到我的页面中：
<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>
But the bar is not animating. The only thing I can think of is the fact that I changed the bar's color in the sassvariables.
但酒吧没有动画。我唯一能想到的是我改变了sass变量中条形的颜色。
Why isn't it animating?
为什么没有动画？
Edit
编辑
What my bar looks like:
我的酒吧是什么样子的：
Edit
编辑
Here is the CSS being applied when I use the activeclass:
这是我使用active该类时应用的 CSS ：
回答by davidpauljunior
It's just that the translucent white stripes (rgba(255,255,255,.15)) don't show up on certain colours.
只是半透明的白色条纹 ( rgba(255,255,255,.15)) 不会出现在某些颜色上。
Take the Chrome browser's yellow. If we take that colour in Photoshop, then place a white stripe over it with .15 opacity, it's not visible. I've put the outline on it here so you can see where the stripe is.
以 Chrome 浏览器的yellow. 如果我们在 Photoshop 中采用这种颜色，然后在其上放置一条不透明度为 0.15 的白色条纹，它就看不到了。我已经把轮廓放在这里，所以你可以看到条纹的位置。
So for certain colours, you may need to adjust the alpha of the stripe colour. I've added a class of .progress-bar-primaryto the .progress-bar, in a similar way to how you'd add .progress-bar-warningetc.
因此，对于某些颜色，您可能需要调整条纹颜色的 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>
Then for that .progress-bar-primary, just change the alpha of the stripe to your taste. For the Chrome Yellow, I've used .75 opacity.
然后为此.progress-bar-primary，只需根据您的口味更改条纹的 alpha。对于 Chrome Yellow，我使用了 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);
}
回答by Dilantha Maneth Perera
Replace class="bar"with class="progress-bar".
替换class="bar"为class="progress-bar"。
回答by Wim Mertens
Place the keyframes css at the top of your css file, not nested (if you uses sass) and don't add it in a media-query.
将关键帧 css 放在 css 文件的顶部，而不是嵌套（如果您使用 sass）并且不要将其添加到媒体查询中。
回答by Armageddon08
Have you actually tried reverting your changes to the colors? If not it may be worth trying that to see if it is your issue.
您是否真的尝试过恢复对颜色的更改？如果不是，可能值得尝试看看是否是您的问题。
If thats nto the case i suggest you should default it back to stock and then just isolate it on its own and see how it goes. It may be a problem with other content in the html or something else confliting so if you load it into a blank document with stock settings.
如果情况并非如此，我建议您默认将其恢复为库存，然后将其单独隔离，然后看看情况如何。html 中的其他内容或其他内容可能存在问题，因此如果您将其加载到具有库存设置的空白文档中。
I cant think of anything else at the moment. I hope it works.
我暂时想不出别的。我希望它有效。
