淡入淡出过渡无法使用reactjs transitiongroup

Question

我需要一些帮助，因为我似乎无法理解自己在做错什么...

下面是我的组件和所使用的CSS的渲染方法。我想做的是在未通过用户身份验证时看到初始屏幕而不是路由器的情况。

它可以工作，但问题是显示初始组件（安装）时没有fadeIn效果，但是从初始屏幕过渡到路由器时却具有fadeOut fadeIn效果...

渲染

render = () => {

    let { user } = this.props;

    return (

        <TransitionGroup id='app' enter={true}>

            {user.authenticated && <CSSTransition
                in={true}
                classNames='fade'
                key={'router'}
                timeout={{ enter: duration, exit: duration }}
            >
                <Router />
            </CSSTransition>}
            {!user.authenticated && <CSSTransition
                in={true}
                classNames='fade'
                key={'splash'}
                timeout={{ enter: duration, exit: duration }}
            >
                <Splash />
            </CSSTransition>}

        </TransitionGroup>

    );

}

css

.fade-enter {
    opacity: 0.01;
}

.fade-enter.fade-enter-active {
    opacity: 1;
    transition: opacity 500ms ease-in;
}

.fade-exit {
    opacity: 1;
}

.fade-exit.fade-exit-active {
    opacity: 0.01;
    transition: opacity 500ms ease-in;
}