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 | 221x 120x 120x 224x 221x 164x 221x 221x 120x | import { styled } from "@mui/material";
import { TransitionProps } from "@mui/material/transitions";
import React from "react";
import { animated, useTransition } from "react-spring";
type SlideTransitionProps = TransitionProps & {
children: React.ReactElement<any, any>;
};
const Container = styled("div")(() => ({
height: "100%",
width: "100%",
}));
const SlidingContainer = animated(Container);
const SlideTransition = React.forwardRef<HTMLDivElement, SlideTransitionProps>(
(props, ref) => {
const { children } = props;
const transitions = useTransition(true, {
from: { transform: "translateY(200px)", opacity: 0 },
enter: { transform: "translate(0px)", opacity: 1 },
leave: { transform: "translateY(200px)", opacity: 0 },
config: { duration: 300, easing: (t: any) => t * (2 - t) },
});
return transitions((style) => (
<SlidingContainer ref={ref} style={style} tabIndex={-1}>
{children}
</SlidingContainer>
));
},
);
SlideTransition.displayName = "SlideTransition";
export default SlideTransition;
|