淡出并使用反应弹簧卸载加载屏幕组件

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

Answer 2

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

使用native 属性，您需要使用animated.div(或任何动画组件(才能对其进行动画处理。或者干脆删除本机属性。就我而言，它是一个不经常显示的加载器，因此我通过简单地删除本机属性来采用更简单的方法。

有关频谱反应弹簧社区的更多信息