在没有动画的情况下将进度条重置为零（在引导程序中）

【问题标题】：Reset progress bar to zero without animation (in bootstrap)在没有动画的情况下将进度条重置为零（在引导程序中）
【发布时间】：2016-07-22 11:47:36
【问题描述】：

我有多个动作要执行，我正在使用引导进度条来显示每个动作的进度。完成每个操作后，使用下面的代码行将进度条设置为零 $('.progress').attr('style', "width: 0%")

但是，这会产生反向动画，对于用户来说，看起来应用程序正在撤消之前执行的操作。

如何在没有反向动画效果的情况下立即重置进度条？

【问题讨论】：

在应用width之前移除动画属性

标签： javascript jquery css twitter-bootstrap

【解决方案1】：

您可以删除进度条的过渡，如this answer中所述

.notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
}
$(".progress-bar").addClass("notransition");
$('.progress-bar').attr('style', "width: 0%");

如果您愿意，可以通过删除 notransition 类再次启用转换

$(".progress-bar").removeClass("notransition");

【讨论】：