title: React - animate mount and unmount of a single component
body: <p>Something this simple should be easily accomplished, yet I'm pulling my hair out over how complicated it is.</p>
  
  <p>All I want to do is animate the mounting &amp; unmounting of a React component, that's it. Here's what I've tried so far and why each solution won't work:</p>
  
  <ol>
  <li><code>ReactCSSTransitionGroup</code> - I'm not using CSS classes at all, it's all JS styles, so this won't work.</li>
  <li><code>ReactTransitionGroup</code> - This lower level API is great, but it requires you to use a callback when the animation is complete, so just using CSS transitions won't work here. There are always animation libraries, which leads to the next point:</li>
  <li>GreenSock - The licensing is too restrictive for business use IMO.</li>
  <li>React Motion - This seems great, but <code>TransitionMotion</code> is extremely confusing and overly complicated for what I need.</li>
  <li>Of course I can just do trickery like Material UI does, where the elements are rendered but remain hidden (<code>left: -10000px</code>) but I'd rather not go that route. I consider it hacky, and I <em>want</em> my components to unmount so they clean up and are not cluttering up the DOM.</li>
  </ol>
  
  <p>I want something that's <em>easy</em> to implement. On mount, animate a set of styles; on unmount, animate the same (or another) set of styles. Done. It also has to be high performance on multiple platforms.</p>
  
  <p>I've hit a brick wall here. If I'm missing something and there's an easy way to do this, let me know.</p>