Question

我正在创建一个具有默认状态和动画状态的进度条组件。目前，动画仅在Safari中触发。对于IE 10/11，我遇到了一个已知问题，其中动画事件不会为伪元素触发，因此解释了一个，但我相信这应该适用于FF和Chrome。我已经做了相当多的谷歌搜索并看到了类似的问题，但这些解决方案通常涉及使用浏览器特定的伪类，我已经尝试但没有成功地让它们工作。对于可能是什么原因的任何想法都非常感激。

progress.pe-progress-bar {
  -webkit-appearance: none;
 -moz-appearance: none;
  appearance: none;
  border: none;
  height: 4px;
}

progress.pe-progress-bar::-webkit-progress-bar {
  background-color: #c7c7c7;
}

progress.pe-progress-bar::-webkit-progress-value {
  background-color: $pe-color-digital-marine-turquoise;
  height: 12px;
  position: relative;
  top: -4px;
}

progress.pe-progress-bar::-moz-progress-bar {
  background-color: #19a5a3;
  height: 12px;
  position: relative;
  margin-top: -4px;
}

progress.pe-progress-bar::-ms-fill {
  background-color: #19a5a3;
  position: relative;
}

progress.pb-animated::-webkit-progress-value {
  background: -webkit-repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 8px,
            #daf0ed 8px,
            #daf0ed 12px,
            transparent 12px), #19a5a3;
  background-size: 50px 100%;
  -webkit-animation: animateStripes_w 6s linear infinite;
}

progress.pb-animated::-moz-progress-bar {
  background: -moz-repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 8px,
            #daf0ed 8px,
            #daf0ed 12px,
            transparent 12px), #19a5a3;
  background-size: 50px 100%;
  -moz-animation: animateStripes_m 6s linear infinite;
}

progress.pb-animated::-ms-fill {
  background: -ms-repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 8px,
            #daf0ed 8px,
            #daf0ed 12px,
            transparent 12px), #19a5a3;
  background-size: 50px 100%;
  animation: animateStripes 6s linear infinite;
}

@-webkit-keyframes animateStripes_w {
  0% {background-position: 0px 0px, 0 0, 0 0}
  100% {background-position: -100px 0px, 0 0, 0 0}
}

@-moz-keyframes animateStripes_m {
  0% {background-position: 0px 0px, 0 0, 0 0}
  100% {background-position: -100px 0px, 0 0, 0 0}
}

@keyframes animateStripes {
  0% {background-position: 0px 0px, 0 0, 0 0}
  100% {background-position: -100px 0px, 0 0, 0 0}
}

JSX

<div className={`progress-bar-text-${alignLabel}`}>
      <p className="pe-label">
        <span ref={span => this.span = span}>
          {value}</span>{labelText}
      </p>
      <progress
        className={type === 'animated' ? 'pe-progress-bar pb-animated' : 'pe-progress-bar'}
        role="progressbar"
        aria-valuemax={max}
        aria-valuenow={value}
        aria-valuetext={`${value}%`}
        max={max}
        value={value}
        ref={progress => this.progress = progress}
      />
</div>

未在Firefox或Chrome中触发的CSS动画事件（适用于Safari）

0 个答案: