html - progress 元素中伪选择器上背景位置动画的解决方法

Question

我有一个不确定的进度条:

<progress max="100"></progress>

我用带有 45 度条纹的绿色背景设计了它:

progress {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
}

progress:not([value])::-webkit-progress-bar {
  background-image:
    -webkit-linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, 0.2) 33%, rgba(0, 0, 0, 0.2) 66%, transparent 66%),
    -webkit-linear-gradient(#b3ee3a, #b3ee3a);
  background-size: 2.5em 1.25em, 100% 100%, 100% 100%;
  background-position: 10%;
  animation-name: stripes;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes stripes {
  from {background-position: 0%}
  to {background-position: 100%}
}

(完整示例:https://jsfiddle.net/w9x7sm6c/4/)

不幸的是，动画不起作用。该问题似乎源于 Chrome 错误/功能:

https://bugs.chromium.org/p/chromium/issues/detail?id=486195

Closing this as WontFix.

Reason: @keyframes rule name is scoped, so the name specified is only available in the same treescope (i.e. in the same document or shadow root). progress::-webkit-progress-value pierces document-UA shadow root boundary and styles the element, but animation name defined in the document treescope isn't available in UA shadow root, thus the animation doesn't apply.

...

A workaround could be to make your own widget and animate it, which should work all (if CSS animation is implemented) browsers.

在我看来，建议的解决方法是不使用 <progress> ，这对我来说似乎是个坏建议。我宁愿使用正确的语义元素，也不愿发明做同样事情的东西。

是否有任何解决方法可用于在不确定状态下为该进度条设置动画？

Answer 1

你可以考虑使用普通的伪元素来创建它。

body {
  background: #333;
}

progress {
  display: block;
  margin-bottom: 1em;
  position:relative;
}

progress {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
}

progress::-webkit-progress-bar {
  background-color: #777;
  border-radius: 0.3em;  
}

progress[value]::-webkit-progress-bar {
  box-shadow: 0 0.3em 0.3em rgba(0,0,0, 0.3) inset;
}

progress::-webkit-progress-value {
  border-radius: 0.3em;
  background-color: #b3ee3a;
}


progress:not([value])::-webkit-progress-bar {
  /* nothing here*/
}
progress:not([value])::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border-radius: 0.3em; 
  background:
    linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, 0.2) 33%, rgba(0, 0, 0, 0.2) 66%, transparent 66%) left/2.5em 1.25em,
    #b3ee3a;
  background-position: 10%;
  animation-name: stripes;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes stripes {
  from {background-position: 0%}
  to {background-position: 100%}
}

<progress max="100" value="33"></progress>
<progress max="100" value="50"></progress>
<progress max="100" value="90"></progress>
<progress max="100"></progress>

或者使用 JS 使用 CSS 变量结合超时来更新值。

这是一个显示值变化的基本示例:

function update() {
  document.querySelector('progress:not([value])').style.setProperty("--c", "100%");
}

progress {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
}

progress:not([value])::-webkit-progress-bar {
  background:
    linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, 0.2) 33%, rgba(0, 0, 0, 0.2) 66%, transparent 66%),
    #b3ee3a;
  background-size: 2.5em 1.25em;
  background-position: var(--c,10%);
  transition:1s all;
}

<progress max="100"></progress>

<button onClick="update()">change</button>