Question

我在网页上有一些进度条的代码，示例代码在这里：

<!DOCTYPE html>
<html>
<head>
  <style>

    progress {
      background-color: #fff;
      height:40px;
      width:200px;
      border: 1px solid black;
    }

    progress::-webkit-progress-bar {background-color: #fff;}
    progress::-webkit-progress-value {background-color: #cb8;}
    progress::-ms-fill {background-color: #cb8;}
    progress::-moz-progress-bar {background: #cb8;}
  </style>
</head>
<body>

  <progress id="prog" value = 0 max = 50></progress>

  <script>
  const $ = s => document.getElementById(s)

  window.setInterval(function(){
    $("prog").value += 2;
    if($("prog").value >= $("prog").max){$("prog").value -= $("prog").max}
  }, 50);
  </script>
</body>

和挑剔的伪元素除了它在chrome，opera和firefox上运行良好。

但是，每次进度条更新时，Microsoft Edge浏览器都会坚持动画转换，这会导致在值快速变化时引入大量滞后和奇怪行为的真实结果。

我已经尝试了一切我能想到的禁用此行为的方法，但到目前为止还没有运气禁用此动画/过渡。有什么建议吗？

我真的很想使用<progress>代码，因为能够直接操作value比更新嵌套div的宽度更方便。

Answer 1

<!DOCTYPE html>
<html>
<head>
  <style>

    progress {
      background-color: #fff;
      height:40px;
      width:200px;
      border: 1px solid black;
    }

    progress::-webkit-progress-bar {background-color: #fff;}
    progress::-webkit-progress-value {background-color: #cb8;}
    progress::-ms-fill {background-color: #cb8;}
    progress::-moz-progress-bar {background: #cb8;}
  </style>
</head>
<body>

  <progress id="prog" value = 0 max = 50></progress>

  <script>
  const $ = function(s){ return document.getElementById(s) };

  window.setInterval(function(){
    $("prog").value += 2;
    if($("prog").value >= $("prog").max){$("prog").value -= $("prog").max}
  }, 50);
  </script>
</body>

试试这段代码。它在chrome和Microsoft边缘工作

Answer 2

我遇到了同样的问题但无法解决问题。根据{{3}}博客文章，暂时无法改变IE和Edge进度条动画。

禁用microsoft的HTML <progress>标记更新动画

2 个答案: