Question

我正在与react-spring挣扎，淡出加载屏幕，然后将其卸下。

该组件卸载但没有动画，我无法理解原因。我创建了一个沙箱来说明：

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组件丢失了。不过，我会建议使用它。即使你的视图很小，它仍然会被React每秒渲染60次（这意味着它将经历所有组件阶段60次+渲染）。使用原生设置，它会渲染一次，动画将直接应用于dom中的requestAnimationFrame循环中（通过instance.style.setProperty，它会完全跳过React - 一旦你的应用变大，它就会产生影响。

Answer 2

如果有人发现这个问题，我找到了解决方案。

使用原生属性，您需要使用animated.div（或任何动画组件）才能对其进行动画处理。或者只是删除原生属性。在我的例子中，它是一个不常显示的加载器，所以我只需删除原生属性就可以更轻松地使用。

More info on the Spectrum react-spring community

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

2 个答案: