22 lines
1.0 KiB
JavaScript
22 lines
1.0 KiB
JavaScript
import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';
|
|
import { fadeAtom } from '../../atoms/fade-atom';
|
|
/** Define a presence motion for fade in/out */ export const createFadePresence = ({ enterDuration = motionTokens.durationNormal, enterEasing = motionTokens.curveEasyEase, exitDuration = enterDuration, exitEasing = enterEasing } = {})=>({
|
|
enter: fadeAtom({
|
|
direction: 'enter',
|
|
duration: enterDuration,
|
|
easing: enterEasing
|
|
}),
|
|
exit: fadeAtom({
|
|
direction: 'exit',
|
|
duration: exitDuration,
|
|
easing: exitEasing
|
|
})
|
|
});
|
|
/** A React component that applies fade in/out transitions to its children. */ export const Fade = createPresenceComponent(createFadePresence());
|
|
export const FadeSnappy = createPresenceComponent(createFadePresence({
|
|
enterDuration: motionTokens.durationFast
|
|
}));
|
|
export const FadeRelaxed = createPresenceComponent(createFadePresence({
|
|
enterDuration: motionTokens.durationGentle
|
|
}));
|