javascript - 使用 React-spring 淡出并卸载加载屏幕组件

Question

我正在为 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 标签，如果有人能创建一个，我认为会很有帮助。

Answer 1

是的，您自己修复了它，animated.div 组件丢失了。不过，我会推荐使用它。即使你的 View 很小，它仍然会被 React 每秒渲染 60 次(这意味着它将经历所有组件阶段 60 次 + 渲染)。使用 native 设置，它会渲染一次，并且动画将直接在 dom 中的 requestAnimationFrame 循环中应用(通过 instance.style.setProperty，它完全跳过 React - 一旦您的应用程序变大，这就会有所不同。