Fade in transition не работает с помощью responsejs 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;
}