对Bootstrap进度条进行动画处理(从0到100％) [英] Animate a Bootstrap progressbar from 0 to 100%

问题描述

我正在使用Twitter Bootstrap构建我的网页.

I'm using Twitter Bootstrap to build my web page.

我有以下HTML代码:

I have this HTML code:

<div class="btn-group">
    <button type="button" class="btn btn-success">Connect</button>
    <button type="button" class="btn btn-success dropdown-data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#"> Connect 1</a></li>    
        <li role="separator" class="divider"></li>
        <li><a href="#"> Connect 2</a></li>
    </ul>
</div>

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
</div>

<div class="alert alert-success" role="alert">Well done! You successfully connected. <a href="#step2" class="alert-link">Next</a></div>

当用户按下连接按钮或按下下拉按钮(两个按钮之一)，并且进度条达到100％时，脚本要显示先前隐藏的警报，我希望将进度条的动画从0设置为100％.

I want to animate the progress bar from 0 to 100% when user push the connect button or push the dropdown button (one of two) and when the progressbar reach 100% the script show the alert previously hidden.

推荐答案

在Bootstrap v4中，默认情况下不再显示进度条动画.您可以将 transition-duration 添加到进度栏元素中，以减慢从0到新宽度的过渡.

In bootstrap v4 the progress bar animation is not by default anymore. You can add transition-duration to the progress bar element to slow down the transition from 0 to the new width.

<div class="progress-bar progress-bar-animated" role="progressbar" style="transition-duration:300ms;"></div>

这篇关于对Bootstrap进度条进行动画处理(从0到100％)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！