title: Fade out and unmount a loading screen component with React-spring
body: <p>I'm struggling with <a href="https://github.com/drcmda/react-spring" rel="nofollow noreferrer">react-spring</a> to fade out a loading screen and then unmount it.</p>
  
  <p>The component unmounts but without animation and I can't figure why. I created a sandbox to illustrate:</p>
  
  <p><a href="https://codesandbox.io/s/nkxjxwo2xl" rel="nofollow noreferrer">https://codesandbox.io/s/nkxjxwo2xl</a></p>
  
  <pre><code>import React from 'react'
  import ReactDOM from 'react-dom'
  import { Transition } from 'react-spring'
  
  class Loader extends React.PureComponent {
    state = { loaded: false }
  
    componentDidMount() {
      setTimeout(() =&gt; {
        this.setState({ loaded: true })
      }, 1000)
    }
  
    render() {
      const { percentage } = this.props
      const styles = {
        height: '100vh',
        width: '100vw',
        background: 'tomato'
      }
      return (
        &lt;Transition native from={{ opacity: 1 }} leave={{ opacity: 0 }}&gt;
          {!this.state.loaded &amp;&amp;
            (style =&gt; (
              &lt;div style={Object.assign({}, styles, style)}&gt;
                &lt;div&gt;{Math.round(percentage)} %&lt;/div&gt;
              &lt;/div&gt;
            ))}
        &lt;/Transition&gt;
      )
    }
  }
  
  ReactDOM.render(&lt;Loader percentage={0} /&gt;, document.getElementById('root'))
  </code></pre>
  
  <p>There are no <code>react-spring</code> tags yet if anyone could create one, I think it would be helpful.</p>