title: Animation on unmount with React and react-transition-group
body: <p>I am working with React, and I'm trying to create a <code>Fade</code> component with React-transition-group to fade in and fade out an element depending on a condition stored in the state: <a href="http://reactcommunity.org/react-transition-group/css-transition/" rel="nofollow noreferrer">http://reactcommunity.org/react-transition-group/css-transition/</a></p>
  
  <p>This is what I have right now:</p>
  
  <pre><code>import React from "react";
  import ReactDOM from "react-dom";
  import { CSSTransition } from "react-transition-group";
  
  import "./styles.css";
  
  class Example extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        mounted: false
      };
    }
    componentDidMount() {
      setTimeout(() =&gt; {
        this.setState({
          mounted: true
        });
      }, 10);
    }
    render() {
      return (
        &lt;div className="root"&gt;
          &lt;CSSTransition
            in={this.state.mounted}
            appear={true}
            unmountOnExit
            classNames="fade"
            timeout={1000}
          &gt;
            {this.state.mounted ? (
              &lt;div&gt;
                &lt;button
                  onClick={() =&gt; {
                    this.setState({
                      mounted: !this.state.mounted
                    });
                  }}
                &gt;
                  Remove
                &lt;/button&gt;
                &lt;div&gt;COMPONENT&lt;/div&gt;
              &lt;/div&gt;
            ) : (
              &lt;div /&gt;
            )}
          &lt;/CSSTransition&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>Here is the CSS</p>
  
  <pre><code>.fade-enter {
      opacity: 0;
      transition: opacity .5s ease;
  }
  
  .fade-enter-active {
      opacity: 1;
      transition: opacity .5s ease;
  }
  
  .fade-exit {
      opacity: 1;
      transition: opacity .5s ease;
  }
  
  .fade-exit-active {
      opacity: 0;
      transition: opacity .5s ease;
  }
  </code></pre>
  
  <p>When the component is mounted there is a transition in opacity from 0 to 1 with .5s. But when its unmounted, it is not animated: the component dissapear without transition.</p>
  
  <p>I made a sandbox with this component to test it: <a href="https://codesandbox.io/s/k027m33y23" rel="nofollow noreferrer">https://codesandbox.io/s/k027m33y23</a>
  I am sure that this is a common case, but I can't find a way to animate the component on the unmount. If anyone has any idea it will be very welcome!</p>
  
  <p>-- EDIT --
  As @IPutuYogaPermana said, the conditional rendering inside CSSTransition is not neccesary. So this:</p>
  
  <pre><code>{this.state.mounted ? (
  &lt;div&gt;
      &lt;button
      onClick={() =&gt; {
          this.setState({
          mounted: !this.state.mounted
          });
      }}
      &gt;
      Remove
      &lt;/button&gt;
      &lt;div&gt;COMPONENT&lt;/div&gt;
  &lt;/div&gt;
  ) : (
  &lt;div /&gt;
  )}
  </code></pre>
  
  <p>Should be like this:</p>
  
  <pre><code>&lt;div&gt;
      &lt;button
      onClick={() =&gt; {
          this.setState({
          mounted: !this.state.mounted
          });
      }}
      &gt;
      Remove
      &lt;/button&gt;
      &lt;div&gt;COMPONENT&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The component will be automatically mounted or unmounted depending on the <code>in</code> attribute in the CSSTransition component.
  Here the final code in a codesandbox: <a href="https://codesandbox.io/s/62m86nm7qw" rel="nofollow noreferrer">https://codesandbox.io/s/62m86nm7qw</a></p>