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

我正在使用图像上传器。在上传过程中更新进度元素值时，我没有任何问题。虽然上传完成后我想用动画改变元素的背景颜色。html5进度元素的动画背景颜色

在我的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; 
}

任何想法，我做错了什么？

来源

2017-10-20 Marco

？我认为你可以做你想要的威盛CSS转换。 – Gezzasa

@Gazzasa是的，它和使用CSS转换一样简单。谢谢 – Marco

很高兴我可以帮助:)。我会发布答案 – Gezzasa

尝试使用CSS转场。非常适合动画，并且不需要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/

来源

2017-10-20 10:57:15 Gezzasa

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

回答

相关问题