twitter-bootstrap 如何在 Internet Explorer 9、10 中为 Twitter Bootstrap 3 进度条设置动画:
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/19530361/
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
How to Animate Twitter Bootstrap 3 progress bar in Internet Explorer 9, 10:
提问by Milligran
How can I get Twitter Bootstrap 3 progress bar to animate and display progress in Internet Explorer 9, 10:
如何让 Twitter Bootstrap 3 进度条在 Internet Explorer 9、10 中设置动画和显示进度:
When displayed in Mozilla or Chrome I can see the progress indicator moving and stripped animation but not in IE
在 Mozilla 或 Chrome 中显示时,我可以看到进度指示器移动和剥离动画,但在 IE 中看不到
Here is the div for the progress bar:
这是进度条的 div:
<div class="progress progress-striped active" style="width:100px">
<div id="myprogress"
class="progress-bar progress-bar-success"
role="progressbar"
aria-valuenow="40"
aria-valuemin="0"
aria-valuemax="100"
style="width: 0%">
</div>
</div>
I am using the default jQuery file upload UI to show progress:
我正在使用默认的 jQuery 文件上传 UI 来显示进度:
<script type="text/javascript"
src="/Content/bootstrap/js/jquery.fileupload.js"></script>
<script type="text/javascript"
src="/Content/bootstrap/js/jquery.fileupload-ui.js"></script>
回答by ?s??? ????
Stripped animation in progress bar is not an available feature on IE
进度条中的剥离动画不是 IE 上的可用功能
From the Docs:
从文档:
Animated
动画
Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.
将 .active 添加到 .progress-striped 以从右到左为条纹设置动画。并非在所有版本的 IE 中都可用。
UPDATE
更新
Bootstrap 3.0.3 -Not available in IE9 and below.
Bootstrap 3.0.3 -在 IE9 及更低版本中不可用。
回答by Vin.AI
Use jQuery animate method if browser IE lte 9.
如果浏览器使用 jQuery 动画方法IE lte 9。
Example:
例子:
jQuery('#myprogress').animate({width:'1%'});
Similarly increase width percentage to show increment.
同样增加宽度百分比以显示增量。
And for animated strip add below selector for IE specific css file.
对于动画条,在 IE 特定的 css 文件的选择器下面添加。
Create a new CSS file ie.cssif not exists or anything suitable.
ie.css如果不存在或任何合适的内容,请创建一个新的 CSS 文件。
Add this selector:
添加此选择器:
.progress-striped .progress-bar {
background-image: url("an-animated-stripped-image.gif");
background-repeat: repeat-x;
}
回答by Harman Preet
Here is the link to Github repository by Minddust https://github.com/minddust/bootstrap-progressbar
这是 Minddust https://github.com/minddust/bootstrap-progressbar 的Github 存储库链接
A bootstrap jquery plugin which extends the basic twitter-bootstrap progressbar. It provides the ability to animate the progressbar by adding Javascript in combination with the preexisting css transitions. Additionally you can display the current progress information in the bar or get the value via callback.
一个 bootstrap jquery 插件,它扩展了基本的 twitter-bootstrap 进度条。它提供了通过添加 Javascript 结合预先存在的 css 转换来为进度条设置动画的能力。此外,您可以在栏中显示当前进度信息或通过回调获取值。
You can use it with any Event as per your Convenience.
您可以根据自己的方便在任何事件中使用它。

