淡出并卸下带有反应弹簧的加载屏幕组件

我正在努力 react-spring 淡出加载屏幕,然后卸载它。

组件卸载,但没有动画,我无法理解为什么。我创建了一个沙盒来说明:

https://codesandbox.io/s/nkxjxwo2xl

import React from 'react'
import ReactDOM from 'react-dom'
import { Transition } from 'react-spring'

class Loader extends React.PureComponent {
  state = { loaded: false }

  componentDidMount() {
    setTimeout(() => {
      this.setState({ loaded: true })
    }, 1000)
  }

  render() {
    const { percentage } = this.props
    const styles = {
      height: '100vh',
      width: '100vw',
      background: 'tomato'
    }
    return (
      <Transition native from={{ opacity: 1 }} leave={{ opacity: 0 }}>
        {!this.state.loaded &&
          (style => (
            <div style={Object.assign({}, styles, style)}>
              <div>{Math.round(percentage)} %</div>
            </div>
          ))}
      </Transition>
    )
  }
}

ReactDOM.render(<Loader percentage={0} />, document.getElementById('root'))

没有 react-spring 但是,如果有人能创建一个标签,我认为这会很有帮助。