React-router: Difference between revisions

From bibbleWiki
Jump to navigation Jump to search
Line 2: Line 2:
You need to provide a class prefix in this case trans.
You need to provide a class prefix in this case trans.
<syntaxhighlight lang="JavaScript">
<syntaxhighlight lang="JavaScript">
import {TransitionGroup, CSSTransition} from 'react-transition-group''
import {TransitionGroup, CSSTransition} from 'react-transition-group'


<TransactionGroup>
<TransactionGroup>

Revision as of 05:45, 29 June 2020

Transitions

You need to provide a class prefix in this case trans.

import {TransitionGroup, CSSTransition} from 'react-transition-group'

<TransactionGroup>
  <CSSTransition key={location.key} classNames={'trans'} timeout={1000}>
    <Switch location={location}>
     <Route path={`${match.url}`} component={LoremNumber} exact/>
     <Route path={`${match.url}/:id`} component={LoremNumber} exact/>
    </Switch>
</TransactionGroup>

And the CSS

.trans-enter {
   opacity: 0;
   z-index: 1;
}

.trans-exit {
   display: none
}

.trans-enter.trans-enter-active {
   opacity: 1;
   transition: opacity 1000ms ease-in;
}