Question

我在项目中使用Bootstrap动画进度条，但我在IE10中遇到了动画的错误。当页面呈现进度条的宽度为10％，然后在5秒后，宽度增加到100％。动画的默认持续时间是2秒，但是当宽度增加时，动画的持续时间不会缩放，因此动画速度会增加10倍。

我已经整理了JSFiddle来证明我的意思。有没有办法让动画速度与IE中的宽度成比例？

HTML

<div class="progress">
      <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 10%"><span class="sr-only">45% Complete</span></div>
</div>

JS

$(function() {
    $(".progress-bar").delay(2000).animate({"width": "100%"});
});

Answer 1

您可以通过以下方式覆盖bootstrap css：

@keyframes progress-bar-stripes {
  from {
    background-position: 0 -40px;
  }
  to {
    background-position: 0 0;
  }
}

Answer 2

问题

目前还不清楚这是一个特定于IE10的动画持续时间错误，因为为动画指定持续时间的事实意味着它不会与距离＆＃34;＃34成比例;进度条必须旅行。

除非您指的是条纹动画？如果你指的是这个，那么解决我在下面提出的问题（即不用CSS和JS动画）可能会有所帮助，如果不是你仍然可以应用相同的想法，而不是覆盖 transition ，您可以覆盖 animation-duration ，并将持续时间基于进度条的宽度。然而，我无法重现这个问题。

您的演示同时使用jQuery和CSS转换的事实可能会导致IE10中出现奇怪的效果，就像在其他浏览器中一样。

可能的解决方案

如果我了解您要实现的目标，您需要做的就是根据进度条的父级的尺寸大小延长持续时间。你可以这样做 - 覆盖Bootstrap CSS - 就像这样。我包括两个条形图，表明它们没有同时完成，但应该有相似的速度：

将代码分解为runbars函数并包装在setTimeout只是为了复制5000延迟，并在代码实际运行之前暂停;代码实际工作并不需要它们。但是，如果您一次在页面上有多个进度条，则需要使用$.each。

如果您指的是条纹动画，只需在下面切换 transition ，然后替换为 animation-duration 。重置动画持续时间一次的唯一问题是，您现在可能会发现动画非常慢，仅在 10％时。但是，如果您实际以编程方式更新进度条以及事情进展（这将有意义），您可以根据完成的条的当前百分比更新动画持续时间。所以，不要只使用 bar.parent() ，而是使用 bar.parent()/100*percentage_calculate 。

＆＃13;

$(function() {
  var runbars = function(){
    $(".progress-bar")
      .each(function(i, elm){
        var bar = $(elm);
        bar.css({
          'transition': 'width '+ (bar.parent().width()/200)+'s linear 0s',
          'width': '100%'
        });
      })
    ;
  };
  setTimeout(runbars, 5000);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<div class="progress" style="width: 50%;">
  <div class="progress-bar progress-bar-striped active" 
       role="progressbar" 
       aria-valuenow="10" 
       aria-valuemin="0" 
       aria-valuemax="100" 
  ><span class="sr-only">10% Complete</span>
  </div>
</div>
<div class="progress" style="width: 100%;">
  <div class="progress-bar progress-bar-striped active" 
       role="progressbar" 
       aria-valuenow="10" 
       aria-valuemin="0" 
       aria-valuemax="100" 
   ><span class="sr-only">10% Complete</span>
  </div>
</div>

＆＃13;

注意

等式bar.parent().width()/200可以理解为number of seconds to travel per every 200 pixels，这意味着＆＃34;旅行＆＃34;无论涉及多少像素，速率总是相同的。

另请注意，我没有使用$.animate，我所做的只是将进度条的宽度设置为100％，设置相对于进度条大小的转换时间（通过jQuery）和然后离开CSS过渡来完成工作。你的小提琴实际上是使用jQuery动画条形图，而浏览器也试图使用CSS转换条形图。你应该选择一种做事方式或另一种方式。

值得注意的是，在上面的示例中，我只使用了transition或animation-duration的无前缀版本。为了满足尽可能多的浏览器，您还应该实现浏览器供应商前缀替代方案。从JavaScript执行此操作可能有点棘手，但this post是如何检测正确使用前缀的一个很好的示例。 大多数现代浏览器应支持无前缀的转换/动画，但绝不能保证每个人都已升级

IE10中的CSS动画持续时间错误

2 个答案:

问题

可能的解决方案

注意