时间戳

首页 > 解决方案 > 使用 React-spring 淡出和卸载加载屏幕组件

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

问题描述

我正在努力使用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标签，如果有人可以创建一个，我认为这会有所帮助。

标签： javascriptreactjs

解决方案

是的，你自己修好了，animated.div 组件丢失了。不过，我会推荐使用它。即使你的视图很小，它仍然会被 React 每秒渲染 60 次，否则（这意味着它将经历所有组件阶段 60 次 + 渲染）。使用原生设置它会渲染一次，并且动画将直接在 dom 中的 requestAnimationFrame-loop 中应用（通过 instance.style.setProperty，它完全跳过 React - 一旦您的应用程序变得更大，这就会产生影响。

推荐阅读