Fade in transition не работает с помощью responsejs transitiongroup - PullRequest
Новая
       24

Fade in transition не работает с помощью responsejs transitiongroup

0 голосов
/ 08 октября 2018

Мне нужна помощь, потому что я не могу понять, что я делаю неправильно ...

Ниже - мой метод рендеринга из моего компонента и используемый 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;
}
...