价值变化的进展元素过渡

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

价值变化的进展元素过渡

Transition for progress element on value change

css

css-transitions

progress-bar