79 lines
2.6 KiB
JavaScript
79 lines
2.6 KiB
JavaScript
import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';
|
|
/**
|
|
* Generates a motion atom object for a fade in or fade out.
|
|
* @param direction - The functional direction of the motion: 'enter' or 'exit'.
|
|
* @param duration - The duration of the motion in milliseconds.
|
|
* @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.
|
|
* @param fromValue - The starting opacity value. Defaults to 0.
|
|
* @returns A motion atom object with opacity keyframes and the supplied duration and easing.
|
|
*/ const fadeAtom = ({ direction, duration, easing = motionTokens.curveLinear, fromValue = 0 })=>{
|
|
const keyframes = [
|
|
{
|
|
opacity: fromValue
|
|
},
|
|
{
|
|
opacity: 1
|
|
}
|
|
];
|
|
if (direction === 'exit') {
|
|
keyframes.reverse();
|
|
}
|
|
return {
|
|
keyframes,
|
|
duration,
|
|
easing
|
|
};
|
|
};
|
|
/**
|
|
* Generates a motion atom object for an X or Y translation, from a specified distance to zero.
|
|
* @param direction - The functional direction of the motion: 'enter' or 'exit'.
|
|
* @param axis - The axis of the translation: 'X' or 'Y'.
|
|
* @param fromValue - The starting position of the slide; it can be a percentage or pixels.
|
|
* @param duration - The duration of the motion in milliseconds.
|
|
* @param easing - The easing curve for the motion. Defaults to `motionTokens.curveDecelerateMid`.
|
|
*/ const slideAtom = ({ direction, axis, fromValue, duration, easing = motionTokens.curveDecelerateMid })=>{
|
|
const keyframes = [
|
|
{
|
|
transform: `translate${axis}(${fromValue})`
|
|
},
|
|
{
|
|
transform: `translate${axis}(0)`
|
|
}
|
|
];
|
|
if (direction === 'exit') {
|
|
keyframes.reverse();
|
|
}
|
|
return {
|
|
keyframes,
|
|
duration,
|
|
easing
|
|
};
|
|
};
|
|
/**
|
|
* A presence component for a MessageBar to enter and exit from a MessageBarGroup.
|
|
* It has an optional enter transition of a slide-in and fade-in,
|
|
* when the `animate` prop is set to `'both'`.
|
|
* It always has an exit transition of a fade-out.
|
|
*/ export const MessageBarMotion = createPresenceComponent(({ animate })=>{
|
|
const duration = motionTokens.durationGentle;
|
|
return {
|
|
enter: animate === 'both' ? [
|
|
fadeAtom({
|
|
direction: 'enter',
|
|
duration
|
|
}),
|
|
slideAtom({
|
|
direction: 'enter',
|
|
axis: 'Y',
|
|
fromValue: '-100%',
|
|
duration
|
|
})
|
|
] : [],
|
|
// Always exit with a fade
|
|
exit: fadeAtom({
|
|
direction: 'exit',
|
|
duration
|
|
})
|
|
};
|
|
});
|