reactjs - 如何在 reactJS 中使组件的外观平滑并消失？

Question

我使用 react + redux，我向服务器发出请求，在等待来自服务器的响应时，组件不显示，值为isFetching = false. 一旦收到答案，价值isFetching = ture

 if (this.props.tv.isFetching) {
    return (<div>hello world</div>)
} else {
    return <Spinner/>;
}

在我们等待服务器响应的那一刻，我想显示一个带有淡入淡出的微调器。

我使用react-transition-group来到输出。但问题是进入和退出事件不起作用，只会出现。

class Spinner extends Component {
    render() {
        return (
            <CSSTransition
                classNames={{
                    appear: 'my-appear',
                    appearActive: 'my-active-appear',
                    enter: 'my-enter',
                    enterActive: 'my-active-enter',
                    exit: 'my-exit',
                    exitActive: 'my-active-exit',
                }}
                timeout={{
                    enter: 300,
                    exit: 50550,
                }}
                in
                appear
            >
                <div className="spinner-wrap" >
                    <div className="spinner"/>
                </div>
            </CSSTransition>
        );
    }
}