Comment faire la transition de couleur d'arrière-plan sur un composant de réaction?

Question

Je veux simplement mettre en place une animation de fondu de fond quand un nouveau message est posté dans la page.

Je veux juste que l'arrière-plan change. du bleu à l'opacité 0.

Juste une animation de base quand un nouveau message est ajouté dans la page en temps réel.

J'ai essayé mais ça ne marche pas, quand j'ajoute le message, la couleur de fond reste bleue.

J'utilise reactJS couplé avec SASS/Compass

<div className="successfully-saved"><Message /></div>

.successfully-saved{ 
 
    background-color:blue; 
 
    @include transition(opacity, 1s ease-out); 
 
}

Merci de nous aider

Answer 1

En supposant que vous voulez fadeOut/message cacher, quand un nouveau poste est ajouté avec succès. Vous pouvez changer le style de la div et définir l'opacité sur 0. Quelque chose comme ça. J'espère que cela t'aides.

let msgEl = document.getElementById('msg'); 
 

 
//To add post successfully, I am just using setTimeout. It may vary in your case. 
 
setTimeout(function() { 
 
    msgEl.innerHTML = "Post Successfully Added"; 
 
    msgEl.style.backgroundColor = 'transparent'; 
 
}, 1000)

.successfully-saved{ 
 
    background-color: blue; 
 
    -webkit-transition: background-color 2s; /* For Safari 3.1 to 6.0 */ 
 
    transition: background-color 2s; 
 
}

<div id="msg" class="successfully-saved"></div>