价值变化的进度元素的过渡

Question

我正在尝试progress使用 CSS向元素添加过渡，以便当它的值发生变化时，它将平滑地移动容器内的进度条。我遇到的问题是让过渡完全起作用，我不知道在哪里放置这样的过渡，因为: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/mcraigantony/pen/waaeWO