Question

我正在尝试使用CSS向progress元素添加转换，以便当它的值发生更改时，它会平滑地移动容器内的进度条。我遇到的问题是让转换工作完全没有，我不知道在哪里进行这样的转换，因为没有像:hover那样的值，例如当值发生变化时（不是我所知道的）。 即便如此，我想做的也是如此，如果是的话，怎么做？

以下代码段：

progress {
  display: block;
  vertical-align: baseline;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0;
  width: 100%;
  margin: 1px auto;
  height: 10px;
  background: yellow;
  transition: all 5s ease 0; /* Does not work */
}
  progress[value]::-webkit-progress-value {
    background: red;
    transition: all 5s ease 0; /* Does not work */
  }
  progress[value]::-webkit-progress-bar {
    background: yellow;
    transition: all 5s ease 0; /* Does not work */
  }
  progress[value]::-moz-progress-bar {
    background: red;
    transition: all 5s ease 0; /* Does not work */
  }

<h3>Progress bar with transition</h3>
<progress id="test-prog" value="25" max="100"></progress>
  <br>
   <button onclick="document.getElementById('test-prog').setAttribute('value',parseInt(document.getElementById('test-prog').getAttribute('value'))+5);">Click me to see the progress bar value change</button>

Answer 1

我认为您不能将transition赋予<progress>元素的值。

它是通过操作系统绘制的，而不是通过CSS绘制的（这就是为什么它在不同的操作系统中看起来不同 - 比如滚动条）。

如果需要，您可以实现自己的HTML + CSS进度条，并为其提供过渡。

示例：http://codepen.io/mcraiganthony/pen/waaeWO

Answer 2

我知道这是一个老问题，但我找到了一种使用

在 chrome 中设置动画值变化的方法

::-webkit-progress-value {
  transition: width 1s;
}

来源：Animating Progress

关于价值变化的进展要素的转变

2 个答案: