title: How to make background's color transition on a react component?
body: <p>I simply want to set up a background fadeout animation when a new message is posted in the page. </p>
  
  <p>I just want the background to change. from blue to opacity 0.</p>
  
  <p>Just a basic animation when a new post is added in the page in real time.</p>
  
  <p>I've tried this but it doesn't work, when i add the message, the background color remains blue.</p>
  
  <p>I am using reactJS coupled with SASS/Compass</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;div className="successfully-saved"&gt;&lt;Message /&gt;&lt;/div&gt;</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.successfully-saved{
    background-color:blue;
    @include transition(opacity, 1s ease-out);
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks for helping</p>