Bootstrap反向动画进度栏，如Github

Question

当使用迁移工具将新的仓库导入Github时， 这里有一个用Bootstrap 3制作的漂亮而简单的Reverse Progress Bar示例。我正在尝试重现此进度条。 这里有我的成绩，到目前为止，低于或在这里是一个工作示例：

• 第一个示例是静态反向进度栏
• 第二个示例显示了动画的储备进度栏
• 第三个示例是标准进度条

发生的结果是，在出于某种原因（可能是属性background-image ）更新百分比状态之前，完全显示了reverse-progress条，而常规progressbar可以正常工作。

进度更新功能UpdateUIReverseProgressBar什么问题？

 /** * Bootstrap Progress Bar * @author Loreto Parisi (loretoparisi@gmail.com) */ UpdateUIProgressBar = function(containerId, progress, text) { text = text || '' if (!$('#progressdiv').length) { var progress = '<div id="progressdiv" class="progress"><div id="progressbardiv" class="progress-bar" role="progressbar" style="min-width:1em;width:0%;">' + text + '</div></div>' $('#' + containerId).append(progress); } else { $('#progressbardiv').text(text); $('#progressbardiv').attr('style', 'min-width: 1em;width: ' + progress + '%;'); $('#progressbardiv').attr('aria-valuenow', progress); if (progress == 100) { setTimeout(function() { $("#progressdiv").remove(); }, 1000 * 2); } } } //UpdateUIProgressBar /** * Bootstrap Reverse ProgressBar inspired to Github UI * @author Loreto Parisi (loretoparisi@gmail.com) */ var UpdateUIReverseProgressBar = function(containerId, progress) { if (!$('#revprogressdiv').length) { var progress = '<div id="revprogressdiv" class="reverse-progress-container"><div id="revprogressdiv" class="reverse-progress-bar anim-shrink-x" role="progressbar" style="min-width:1em;width:0%;"></div></div>' $('#' + containerId).append(progress); } else { $('#revprogressdiv').attr('style', 'min-width: 1em;width: ' + progress + '%;'); if (progress == 100) { setTimeout(function() { $("#revprogressdiv").remove(); }, 1000 * 2); } } } //UpdateUIReverseProgressBar var perc = 0, step = 10; var interval = setInterval(function() { perc = perc + step; UpdateUIReverseProgressBar('myreverseprogress', perc); UpdateUIProgressBar('myprogress', perc); if (perc >= 100) clearInterval(interval); }, 1000) 

 .reverse-progress-container { position: relative; height: 3px; background-color: #e5e9eb; background-image: -webkit-linear-gradient(left, #599e47, #306a94, #492860, #c03d32, #d17337); background-image: linear-gradient(to right, #599e47, #306a94, #492860, #c03d32, #d17337); background-size: 100% 3px; } .anim-shrink-x { -webkit-animation-name: shrink-x; animation-name: shrink-x; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" /> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css.map" /> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css" /> <div class="panel panel-default"> <div class="panel-body"> <div class="reverse-progress-container"> <div style="width: 0%; min-width: 0%; animation-duration: 5s;" class="reverse-progress-bar anim-shrink-x"></div> </div> </div> </div> <div class="panel panel-default"> <div class="panel-body"> <div class="progress" id="myreverseprogress"></div> </div> </div> <div class="panel panel-default"> <div class="panel-body"> <div class="progress" id="myprogress"></div> </div> </div> 

Answer 1

我已经为元素添加了初始宽度，请参见代码中的注释

 /** * Bootstrap Progress Bar * @author Loreto Parisi (loretoparisi@gmail.com) */ UpdateUIProgressBar = function(containerId, progress, text) { text = text || '' if (!$('#progressdiv').length) { var progress = '<div id="progressdiv" class="progress"><div id="progressbardiv" class="progress-bar" role="progressbar" style="min-width:1em;width:0%;">' + text + '</div></div>' $('#' + containerId).append(progress); } else { $('#progressbardiv').text(text); $('#progressbardiv').attr('style', 'min-width: 1em;width: ' + progress + '%;'); $('#progressbardiv').attr('aria-valuenow', progress); if (progress == 100) { setTimeout(function() { $("#progressdiv").remove(); }, 1000 * 2); } } } //UpdateUIProgressBar /** * Bootstrap Reverse ProgressBar inspired to Github UI * @author Loreto Parisi (loretoparisi@gmail.com) */ var UpdateUIReverseProgressBar = function(containerId, progress) { if (!$('#revprogressdiv').length) { /* added width 0px in the following */ var progress = '<div id="revprogressdiv" class="reverse-progress-container" style="width: 0px;"><div id="revprogressdiv" class="reverse-progress-bar anim-shrink-x" role="progressbar" style="min-width:1em;width:0%;"></div></div>' $('#' + containerId).append(progress); } else { $('#revprogressdiv').attr('style', 'min-width: 1em;width: ' + progress + '%;'); if (progress == 100) { setTimeout(function() { $("#revprogressdiv").remove(); }, 1000 * 2); } } } //UpdateUIReverseProgressBar var perc = 0, step = 10; var interval = setInterval(function() { perc = perc + step; UpdateUIReverseProgressBar('myreverseprogress', perc); UpdateUIProgressBar('myprogress', perc); if (perc >= 100) clearInterval(interval); }, 1000) 

 .reverse-progress-container { position: relative; height: 3px; background-color: #e5e9eb; background-image: -webkit-linear-gradient(left, #599e47, #306a94, #492860, #c03d32, #d17337); background-image: linear-gradient(to right, #599e47, #306a94, #492860, #c03d32, #d17337); background-size: 100% 3px; } .anim-shrink-x { -webkit-animation-name: shrink-x; animation-name: shrink-x; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" /> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css.map" /> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css" /> <div class="panel panel-default"> <div class="panel-body"> <div class="reverse-progress-container" > <div style="width: 0%; min-width: 0%; animation-duration: 5s;" class="reverse-progress-bar anim-shrink-x"></div> </div> </div> </div> <div class="panel panel-default"> <div class="panel-body"> <div class="progress" id="myreverseprogress"></div> </div> </div> <div class="panel panel-default"> <div class="panel-body"> <div class="progress" id="myprogress"></div> </div> </div>