React Router Transition Animation стирает старый роутер на белом фоне - PullRequest
Новая
       22

React Router Transition Animation стирает старый роутер на белом фоне

0 голосов
/ 05 июля 2018

Я реализовал переход реагирующего маршрутизатора для анимации скольжения с использованием ReactCSSTransitionGroup следующим образом http://recordit.co/Bm39Gxir9F

Я ищу способ предотвратить побеление экрана во время перехода, т. Е. Сделать так, чтобы новый маршрутизатор скользил по предыдущему. Есть ли способ достичь этого?

Вот мой код

Layout.jsx 

<Container className={css['sendcoin']}>
            <ReactCSSTransitionGroup transitionName={transitions} transitionAppearTimeout={1200} transitionLeaveTimeout={1200} transitionAppear={true} transitionEnter={false} transitionLeave={true} >
                <Route path="/send/:type">
                  <div className={css['senddiv']}>
                     <...>
                  </div>
                </Route>
            </ReactCSSTransitionGroup>
</Container>

router.jsx 

<Switch>
        <Route exact path='/sign_in' component={SignIn}/>

        <Route>
          <Container>
              <Route component={Authentication}/>
              <Route exact path='/' component={Dashboard}/>
              <Route path='/charge/:type' component={LayoutCharge} />
              <Route path='/send/:type' component={Layout}/>
          </Container>
        </Route>
</Switch>

transitions.css 

.appear { 
    transform: translateY(500%);
    z-index: 1000;
}
.appearActive { 
    transform: translateY(0%);
    transition: transform 1200ms;
}
...