mirror of
https://github.com/duckietm/Nitro-V3.git
synced 2026-06-19 23:16:21 +00:00
DuckieTM
99aceefb9e
react-bootstrap → migrate to shadcn/ui + Tailwind (or HeroUI) Legacy, ~250KB bundle, dated API, inconsistent with CMS stack react-transition-group → use framer-motion (already installed!) De-facto deprecated, duplicate animation lib
67 lines
2.2 KiB
TypeScript
67 lines
2.2 KiB
TypeScript
import { Variants } from 'framer-motion';
|
|
import { TransitionAnimationTypes } from './TransitionAnimationTypes';
|
|
|
|
export function getTransitionVariants(type: string): Variants
|
|
{
|
|
switch(type)
|
|
{
|
|
case TransitionAnimationTypes.BOUNCE:
|
|
return {
|
|
hidden: { opacity: 0, scale: 0.3 },
|
|
visible: { opacity: 1, scale: 1, transition: { type: 'spring', stiffness: 260, damping: 12 } },
|
|
exit: { opacity: 0, scale: 0.3 }
|
|
};
|
|
case TransitionAnimationTypes.SLIDE_LEFT:
|
|
return {
|
|
hidden: { opacity: 0, x: '-100%' },
|
|
visible: { opacity: 1, x: 0 },
|
|
exit: { opacity: 0, x: '-100%' }
|
|
};
|
|
case TransitionAnimationTypes.SLIDE_RIGHT:
|
|
return {
|
|
hidden: { opacity: 0, x: '100%' },
|
|
visible: { opacity: 1, x: 0 },
|
|
exit: { opacity: 0, x: '100%' }
|
|
};
|
|
case TransitionAnimationTypes.FLIP_X:
|
|
return {
|
|
hidden: { opacity: 0, rotateX: 90 },
|
|
visible: { opacity: 1, rotateX: 0 },
|
|
exit: { opacity: 0, rotateX: 90 }
|
|
};
|
|
case TransitionAnimationTypes.FADE_UP:
|
|
return {
|
|
hidden: { opacity: 0, y: 20 },
|
|
visible: { opacity: 1, y: 0 },
|
|
exit: { opacity: 0, y: 20 }
|
|
};
|
|
case TransitionAnimationTypes.FADE_IN:
|
|
return {
|
|
hidden: { opacity: 0 },
|
|
visible: { opacity: 1 },
|
|
exit: { opacity: 0 }
|
|
};
|
|
case TransitionAnimationTypes.FADE_DOWN:
|
|
return {
|
|
hidden: { opacity: 0, y: -20 },
|
|
visible: { opacity: 1, y: 0 },
|
|
exit: { opacity: 0, y: -20 }
|
|
};
|
|
case TransitionAnimationTypes.HEAD_SHAKE:
|
|
return {
|
|
hidden: { x: 0 },
|
|
visible: {
|
|
x: [ 0, -6, 5, -3, 2, 0 ],
|
|
transition: { duration: 0.5 }
|
|
},
|
|
exit: { x: 0 }
|
|
};
|
|
}
|
|
|
|
return {
|
|
hidden: {},
|
|
visible: {},
|
|
exit: {}
|
|
};
|
|
}
|