material ui的FADE并没有把元素移除,会有性能问题

material ui的FADE并没有把元素移除,会有性能问题

使用react-transition-group的transition来实现了fade并移除的效果

http://reactcommunity.org/react-transition-group/transition

https://stackoverflow.com/questions/52637818/fade-in-material-ui-just-disables-the-visibility-of-the-component-how-to-get

<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传入来控制