How to make background's color transition on a react component?

Question

I simply want to set up a background fadeout animation when a new message is posted in the page.

I just want the background to change. from blue to opacity 0.

Just a basic animation when a new post is added in the page in real time.

I've tried this but it doesn't work, when i add the message, the background color remains blue.

I am using reactJS coupled with SASS/Compass

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

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

Thanks for helping

Answer 1

Assuming, you want to fadeout/hide message, when a new post is successfully added. You can change the style of the div and set opacity to 0. Something like this. Hope this helps.

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>