Animer la couleur de fond de l'élément de progression html5

Je travaille sur une chargeuse d'images. Je n'ai aucun problème avec la mise à jour de la valeur de l'élément de progression pendant le téléchargement. Bien que le téléchargement soit terminé, j'aimerais changer la couleur de fond de l'élément avec une animation.Animer la couleur de fond de l'élément de progression html5

Dans mon jQuery je donne l'élément une autre classe et:

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

Et ceci est mon 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; 
}

Toute idée de ce que je fais mal ici?

Source

2017-10-20 Marco

Une fois que la classe est ajoutée que vous voulez que la couleur pour changer par l'animation? Je pense que vous serez capable de faire ce que vous voulez des transitions VIA CSS. – Gezzasa

@Gazzasa Oui, c'était aussi simple que d'utiliser CSS Transition. Merci – Marco

Je suis heureux d'avoir pu aider :). Je posterai la réponse – Gezzasa

Essayez d'utiliser CSS Transitions. Fonctionne très bien pour les animations et aucun JS requis.

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; 
}

fait un exemple, mais utilisé :hover au lieu de .addClass()

https://jsfiddle.net/zk0Lg345/

Source

2017-10-20 10:57:15 Gezzasa

Animer la couleur de fond de l'élément de progression html5

Répondre

Questions connexes