React-router: Difference between revisions
Jump to navigation
Jump to search
Created page with "= Transitions = You need to provide a class prefix in this case trans. <syntaxhighlight lang="javascript"> import {TransitionGroup, CSSTransition} from 'react-transition-group..." |
|||
| Line 1: | Line 1: | ||
= Transitions = | = Transitions = | ||
You need to provide a class prefix in this case trans. | You need to provide a class prefix in this case trans. | ||
<syntaxhighlight lang=" | <syntaxhighlight lang="JavaScript"> | ||
import {TransitionGroup, CSSTransition} from 'react-transition-group'' | import {TransitionGroup, CSSTransition} from 'react-transition-group'' | ||
| Line 14: | Line 14: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
And the CSS | And the CSS | ||
<syntaxhighlight lang=" | <syntaxhighlight lang="CSS"> | ||
.trans-enter { | .trans-enter { | ||
opacity: 0; | opacity: 0; | ||
Revision as of 05:43, 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;
}