使用 jQuery 更改 Bootstrap 动画进度条动画持续时间

Question

我正在尝试更改 Twitter Bootstrap 动画进度条上使用的 CSS3 动画的持续时间。 我想要的结果是使用 jQuery 减少动画的持续时间，以便我有一个更快的动画。

我有以下 HTML 和 CSS，并使用了以下 jQuery。

HTML：

<div class="progress progress-striped active" style="width:102px;">
    <div id="test" class="progress-bar" role="progressbar">
    </div>
</div>

CSS：

.progress-bar {
    background-color: #bd4a61;
    width: 100%;
}

我正在使用以下 jQuery 来更改值，但这似乎没有任何效果。我使用 Chrome 作为我的测试浏览器，但我似乎在所有浏览器中都得到了这种行为。

jQuery:

$("#test").css("-webkit-animation-duration", "1s");

如果我在执行 jQuery 后获取 animation-duration 的值，它读取为“1s”而不是默认的“2s”，但视觉效果保持不变。

编辑：在设置值后使用 jQuery 隐藏和显示元素似乎可以获得适用于 Internet Explorer 的效果。

Answer 1

似乎至少 Chrome 没有检测到 css 属性 animation-duration 的变化。但是，通过删除然后重新添加 progress-bar 类，当在 setTimeout 中完成进度条类的重新添加时，更改 animation-duration 时的动画会起作用。

$('#test').css('animation-duration', '0.1s').removeClass('progress-bar');
setTimeout(function() { 
    $('#test').addClass('progress-bar');
}, 1);

这看起来非常丑陋且容易出错，但它确实有效。

另一种我认为更好的方法是设置所有动画属性。这无需费力地添加和删除progress-bar 类：

var secondFraction = '0.2'
$('#test').css('animation', secondFraction + 's linear 0s normal none infinite progress-bar-stripes');

Answer 2

  $(document).ready(function() {
      $('.progress-bar').css("width",
                function() {
                    return $(this).attr("aria-valuenow") + "%";
                }
        ) 
    });
    var counterBack = setInterval(function(){   
      
      var date = $("#time i").html(); 
      var d = date/30*100;
      var i = Math.round(d); 
       if (i < 20){
           $("#progress").addClass('progress-bar-danger').removeClass('progress-bar-info');
        }
        if (i < 70){
           $("#progress").addClass('progress-bar-info').removeClass('progress-bar-success');
        }
        if (i > 0){
          $('.progress-bar').css('width', i+'%');
        } else {
          $('.progress-bar').css('width', 0+'%');
          clearInterval(counterBack);
        }  
      }, 1000);

.progress {
  margin-top: 10px;
  margin-bottom: 10px;
  height: 25px;

}
.progress .skill {
  font: normal 12px "Open Sans Web";
  line-height: 35px;
  padding: 0;
  margin: 0 0 0 20px;
  text-transform: uppercase;
}
.progress .skill .val {
  float: right;
  font-style: normal;
  margin: 0 20px 0 0;
}

.progress-bar {
  text-align: left;
  transition-duration: 3s;
}

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
   <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
  
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
  <div class="progress">
  <div id="progress" class="progress-bar progress-bar-striped progress-bar-animated active progress-bar-success" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
    <span class="sr-only"></span>
    <span id="time" class="skill">Your Time<i class="val">{{counter | async}}</i></span>
  </div>
</div>