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

【问题标题】：CSS animation duration bug in IE10IE10 中的 CSS 动画持续时间错误
【发布时间】：2014-09-24 15:32:55
【问题描述】：

我在项目中使用 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>

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

【问题讨论】：

“动画的持续时间没有缩放”是什么意思
这不是引导错误。这里的问题是延迟！= 持续时间。延迟是动画开始之前必须经过的时间量。持续时间是动画完成所需的时间。

标签： css twitter-bootstrap-3 internet-explorer-10 css-animations

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

问题

目前还不清楚这怎么可能是 IE10 特有的动画持续时间错误，因为为动画指定持续时间这一事实意味着它与进度条必须移动的“距离”不成比例.

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

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

可能的解决方案

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

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

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

$(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);
});

<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>

注意

等式bar.parent().width()/200 可以读作number of seconds to travel per every 200 pixels，这意味着无论涉及多少像素，“移动”率始终相同。

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

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

【讨论】：