css - 值(value)变化的进展元素过渡

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