material ui的FADE并没有把元素移除,会有性能问题
使用react-transition-group的transition来实现了fade并移除的效果
http://reactcommunity.org/react-transition-group/transition
<Transition timeout={100} in={page.isLoading} unmountOnExit={true}>
{(state) => (
<div style={{
transition: `opacity 1s 0.3s ease-in-out`,
opacity: 0,
...({
entering: { opacity: 1, display: 'block' },
entered: { opacity: 1, display: 'block' },
exiting: { opacity: 0, display: 'block' },
exited: { opacity: 0, display: 'none' }
}[state])
}}>
...
</div>)}
</Transition>
transition有4个状态
entering,entered,exiting,exited
通过state传入来控制