动画html5进度元素的背景颜色

Question

我正在开发一个图像上传器。在上传过程中更新progress元素值没有任何问题。虽然上传完成后我想用动画改变元素的背景颜色。

在我的jQuery中，我给元素一个不同的类，并且：

$(newImageElement).find('.list-item__image-holder 
.progressBar').addClass('progressBar-green');

这是我的css：

.list-item__image-holder .progressBar-green[value]::-webkit-progress-value {
-webkit-animation: progressBarAnimation 3s ease-in;
animation: progressBarAnimation 3s ease-in;
}


@keyframes progressBarAnimation {
  0% {
      background-color: #f96332;
  }
  100% {
      background-color: #5cb860;
 }

知道我在这里做错了吗？

Answer 1

尝试使用CSS Transitions。适用于动画，不需要JS。

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

.list-item__image-holder .progressBar {
    background-color: #f96332;
    transition: background-color ease-in 1s;
}

.list-item__image-holder .progressBar.progressBar-green {
    background-color: #5cb860;
}

做了一个示例，但使用:hover代替.addClass()

https://jsfiddle.net/zk0Lg345/