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后获取动画持续时间的值，则会将其读为＆＃34; 1s＆＃34;而不是默认的＆＃34; 2s＆＃34;但视觉效果保持不变。

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

Answer 1

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

$('#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>

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

2 个答案: