30 lines
804 B
TypeScript
30 lines
804 B
TypeScript
import { motion } from 'framer-motion';
|
|
|
|
import { animateFade } from '@/styling/animations';
|
|
|
|
import { CProps } from '../props';
|
|
|
|
interface AnimateFadeProps extends CProps.AnimatedDiv {
|
|
noFadeIn?: boolean;
|
|
noFadeOut?: boolean;
|
|
hideContent?: boolean;
|
|
}
|
|
|
|
function AnimateFade({ style, noFadeIn, noFadeOut, children, hideContent, ...restProps }: AnimateFadeProps) {
|
|
return (
|
|
<motion.div
|
|
tabIndex={-1}
|
|
initial={{ ...(!noFadeIn ? animateFade.initial : {}) }}
|
|
animate={hideContent ? 'hidden' : 'active'}
|
|
variants={animateFade.variants}
|
|
exit={{ ...(!noFadeOut ? animateFade.exit : {}) }}
|
|
style={{ display: hideContent ? 'none' : '', willChange: 'auto', ...style }}
|
|
{...restProps}
|
|
>
|
|
{children}
|
|
</motion.div>
|
|
);
|
|
}
|
|
|
|
export default AnimateFade;
|