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進度元素的動畫背景顏色

回答

相關問題