38 lines
824 B
JavaScript
38 lines
824 B
JavaScript
import classNames from 'classnames';
|
|
|
|
import { Transition } from 'react-transition-group';
|
|
|
|
const duration = 500;
|
|
|
|
const defaultStyle = {
|
|
transition: `opacity ${duration}ms ease-in-out`,
|
|
opacity: 0,
|
|
};
|
|
|
|
const transitionStyles = {
|
|
entering: { opacity: 1 },
|
|
entered: { opacity: 1 },
|
|
exiting: { opacity: 0 },
|
|
exited: { opacity: 0 },
|
|
};
|
|
|
|
const PageStack = ({ children, className, ...props }) => (
|
|
<div {...props} className={classNames('flex-1 z-0 overflow-hidden relative', className)}>
|
|
<Transition in={true} duration={duration}>
|
|
{state => (
|
|
<div
|
|
className="w-full h-full"
|
|
style={{
|
|
...defaultStyle,
|
|
...transitionStyles[state],
|
|
}}
|
|
>
|
|
{children}
|
|
</div>
|
|
)}
|
|
</Transition>
|
|
</div>
|
|
);
|
|
|
|
export default PageStack;
|