title: React CSSTransitionGroup not transitioning smoothly
body: <blockquote>
    <p>Hi, I am trying to use React's CSSTransitionGroup to smoothly fade in
    a spinner for loading during an async call once a button is clicked,
    but even when I do everything according to the documentation (<a href="https://github.com/reactjs/react-transition-group/tree/v1-stable" rel="nofollow noreferrer">https://github.com/reactjs/react-transition-group/tree/v1-stable</a>), the
    transition does not happen smoothly.</p>
    
    <p>To describe what is actually
    happening more clearly, when the button is clicked:</p>
    
    <ol>
    <li>The button is "pushed down" by the length of the spinner on the page.</li>
    <li>At this point, the html is a div containing the spinner (with enter attributes) and the button underneath it (with leave attributes)</li>
    <li>The button fades out in what appears to be half a second. Once it has faded out, the spinner fades in.</li>
    <li>After a few seconds, the entire transition seems to have finished, and only the button exists (with correct spacing).</li>
    </ol>
    
    <h2>Code</h2>
  
  <pre><code> // App.js
   import { CSSTransitionGroup } from 'react-transition-group';
  
   export default class App extends Component {
       constructor(props) {
            super(props);
            this.renderButton = this.renderButton.bind(this);
       }
  
       renderButton(handleClick, fetching, fetched) {
            if (!fetching &amp;&amp; !fetched) {
                return(&lt;button className="async-btn" key="async-btn" type="button" onClick={handleClick}&gt;Start Async&lt;/button&gt;);
            }
            else {
                 return(&lt;Spinner key="spinner" /&gt;);
            }
        }
  
        render() {
        const { fetched, fetching, handleClick } = this.props;
            return (
                &lt;CSSTransitionGroup
                transitionName="fade"
                transitionEnterTimeout={500}
                transitionLeaveTimeout={300}&gt;
                    {this.renderButton(handleClick, fetching, fetched)}
                &lt;/CSSTransitionGroup&gt;
            )
        }
  }
  
  // index.css
  .fade-enter {
    opacity: 0.01;
  }
  
  .fade-enter.fade-enter-active {
    opacity: 1;
    transition: opacity 500ms ease-in;
  }
  
  .fade-leave {
    opacity: 1;
  }
  
  .fade-leave.fade-leave-active {
    opacity: 0.01;
    transition: opacity 300ms ease-in;
  }
  </code></pre>
    
    <h2>Questions</h2>
    
    <p>1) Can I NOT trigger successful transitions like I am doing with
    switching in between a button and component (which is simply a div
    with a img within it)? Or must it be a ul or array rendering?</p>
    
    <p>2) Is there anything else that I am not following according to
    documentation?</p>
    
    <p>Thank you.</p>
  </blockquote>