title: How do I use React's CSSTransitionGroup to fade-in/out my alert message?
body: <p>I'm trying to build a React 16.13.0 Flash component, that I would like to fade-in and fade-out an alert message (for instance, to tell the user something has saved successfully).  I'm using the CSSTransitionGroup to try and do this.  I built this Flash component</p>
  <pre><code>import React, { useEffect, useState } from &quot;react&quot;;
  import Bus from &quot;../Utils/Bus&quot;;
  import { CSSTransition } from &quot;react-transition-group&quot;;
  
  import &quot;./index.css&quot;;
  
  export const Flash = () =&gt; {
    let [visibility, setVisibility] = useState(false);
    let [message, setMessage] = useState(&quot;&quot;);
    let [type, setType] = useState(&quot;&quot;);
  
    useEffect(() =&gt; {
      Bus.addListener(&quot;flash&quot;, ({ message, type }) =&gt; {
        setVisibility(true);
        setMessage(message);
        setType(type);
        setTimeout(() =&gt; {
          setVisibility(false);
        }, 4000);
      });
    }, []);
  
    useEffect(() =&gt; {
      if (document.querySelector(&quot;.close&quot;) !== null) {
        document
          .querySelector(&quot;.close&quot;)
          .addEventListener(&quot;click&quot;, () =&gt; setVisibility(false));
      }
    });
  
    return (
      visibility &amp;&amp; (
        &lt;CSSTransition in={visibility} timeout={300} classNames=&quot;sample&quot;&gt;
          &lt;div className={`alert alert-${type}`}&gt;
            &lt;span className=&quot;close&quot;&gt;
              &lt;strong&gt;X&lt;/strong&gt;
            &lt;/span&gt;
            &lt;p&gt;{message}&lt;/p&gt;
          &lt;/div&gt;
        &lt;/CSSTransition&gt;
      )
    );
  };
  </code></pre>
  <p>and am using the following CSS ...</p>
  <pre><code>.alert {
    color: white;
    border-radius: 10px;
    position: absolute;
    top: 50px;
    padding: 20px;
    width: 100%;
    display: flex;
    align-items: center;
    z-index: 1111;
  }
  
  .alert p {
    margin: 0;
  }
  
  .alert-error {
    background: lightcoral;
  }
  
  .alert-success {
    background: lightgreen;
  }
  
  .close {
    color: white;
    cursor: pointer;
    margin-right: 10px;
  }
  
  .sample-enter {
    opacity: 0;
  }
  
  .sample-enter-active {
    opacity: 0.5;
    transition: opacity 300ms;
  }
  
  .sample-enter-done {
    opacity: 1;
  }
  
  .sample-exit {
    opacity: 1;
  }
  
  .sample-exit-active {
    opacity: 0.5;
    transition: opacity 300ms;
  }
  
  .sample-exit-done {
    opacity: 0;
  }
  </code></pre>
  <p>However, the message appears without a fade-in and then disappears without a fade-out.  I'm not sure what else I'm doing wrong or need to add.</p>