title: Animating show/hide component in React?
body: <p>So im starting to look into React (Coming from a VueJS World) and have run into to what I see as a problem :)</p>
  <p>In my state i have a boolean value for showing/hiding a modal component like so:</p>
  <pre><code>{showModal &amp;&amp; &lt;Modal modalHeaderContent={modalHeaderContent} modalContent={modalContent} /&gt;}
  </code></pre>
  <p>Now what I want to to is to fade in the component when showModal is true, and then not, then fadeout... And then be removed from the DOM, and it's here where the problem comes in...</p>
  <p>I've been looking at <code>react-transition-group</code> which actually does the trick somewhat fine...</p>
  <pre><code>&lt;CSSTransition in={showModal} appear={showModal} timeout=&quot;1000&quot; classNames=&quot;sample&quot;&gt;
              &lt;Modal modalHeaderContent={modalHeaderContent} modalContent={modalContent} /&gt;
          &lt;/CSSTransition&gt;
  </code></pre>
  <p>And this works... However, with that caveat that the modal component always exists in the DOM, even when showModal is false... So I found that I could use the prop showModal inside the ModalComponent as well, and display the contents of the Modal Component when showModal is true, however, when triggering showModal to false, the content disappears before the fadeOut animation is done...</p>
  <p>Im my opinion, this seems somewhat bloated, as the component isn't needed in the DOM when showModal is false, and there's no reason to load in the Modal component before showModal is true...</p>
  <p>I cant seem to find ANY solution to this problem...</p>
  <p>In Vue there is a transition component that handles this perfectly which works almost identical, which handles the CSS animation as it should, and also adds/removed the components from the DOM:</p>
  <pre><code>&lt;transition name=&quot;modal&quot; v-if=&quot;showModal&quot;&gt;
     &lt;modal-component /&gt;
  &lt;/transition&gt;
  </code></pre>
  <p>Any ideas?
  I would very much like to avoid some heave animation library for doing this simple thing...</p>