reactjs - 使用 reactjs transitiongroup 淡入淡出不工作

Question

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

Bellow 是我的组件和使用的 css 的渲染方法。我想要做的是，当用户未通过身份验证以查看启动屏幕而不是路由器时。

它可以工作，但问题是显示启动组件（安装）时没有淡入淡出效果，但是从启动画面过渡到路由器时有淡出淡入效果......

使成为

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;
}