Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | 8x 17x 17x 53x | import React from "react";
import {
TransitionGroup,
Transition as ReactTransition,
} from "react-transition-group";
const getTransitionStyles = {
entering: {
position: "absolute",
opacity: 0,
},
entered: {
transition: "opacity 100ms ease-in-out",
opacity: 1,
},
exiting: {
transition: "all 100ms ease-in-out",
opacity: 0,
},
};
type Props = {
children: React.ReactNode;
location: {
pathname: string;
};
};
class Transition extends React.PureComponent<Props> {
render() {
// Destructuring props to avoid garbage this.props... in return statement
const { children, location } = this.props;
// the key is necessary
// As our ReactTransition needs to know when pages are entering/exiting the DOM
return (
<TransitionGroup>
<ReactTransition
key={location.pathname}
timeout={
{ enter: 100, exit: 100 } // duration of transition
}
>
{
// Styles depends on the status of page(entering, exiting, entered) in the DOM
(status) => (
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
<div style={{ ...getTransitionStyles[status] }}>{children}</div>
)
}
</ReactTransition>
</TransitionGroup>
);
}
}
export default Transition;
|