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

Question

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

Gle*_*kus 5 html javascript css microsoft-edge

我在网页上有一些进度条代码,示例代码如下:

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

Run Code Online (Sandbox Code Playgroud)

除了在chrome,opera和firefox上运行良好之外,还有挑剔的伪元素.

但是,Microsoft Edge浏览器坚持每次进度条更新时都会设置过渡动画,这会在值快速变化时引入大量滞后和奇怪的行为.

我已经尝试了所有我能想到的禁用此行为的东西,但到目前为止没有运气禁用此动画/过渡.有什么建议？

我真的很想使用<progress>标签,因为能够value直接操作它比更新嵌套div的宽度要方便得多.

Answer 1

Akh*_*ash 0

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

Run Code Online (Sandbox Code Playgroud)

试试这个代码。它可以在 Chrome 和 Microsoft Edge 中运行

归档时间：	8 年，8 月前
查看次数：	204 次
最近记录：	8 年，3 月前