@sky-mavis/tanto-widget
Version:
Tanto Widget
34 lines • 744 B
JavaScript
import {jsx}from'@emotion/react/jsx-runtime';import {AnimatePresence}from'motion/react';import*as m from'motion/react-m';import {forwardRef}from'react';const animationProps = {
initial: {
opacity: 0,
scale: 0.95
},
animate: {
opacity: 1,
scale: 1
},
exit: {
opacity: 0,
scale: 0.95
},
transition: {
duration: 0.2
}
};
const TransitionedView = forwardRef(({
children,
viewKey,
onAnimationComplete
}, ref) => jsx(AnimatePresence, {
initial: false,
mode: "popLayout",
children: jsx(m.div, {
ref: ref,
style: {
width: '100%'
},
...animationProps,
onAnimationComplete: onAnimationComplete,
children: children
}, viewKey.toString())
}));export{TransitionedView};