79 lines
2.8 KiB
JavaScript
79 lines
2.8 KiB
JavaScript
"use strict";
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
function _export(target, all) {
|
|
for(var name in all)Object.defineProperty(target, name, {
|
|
enumerable: true,
|
|
get: all[name]
|
|
});
|
|
}
|
|
_export(exports, {
|
|
Scale: function() {
|
|
return Scale;
|
|
},
|
|
ScaleRelaxed: function() {
|
|
return ScaleRelaxed;
|
|
},
|
|
ScaleSnappy: function() {
|
|
return ScaleSnappy;
|
|
},
|
|
createScalePresence: function() {
|
|
return createScalePresence;
|
|
}
|
|
});
|
|
const _reactmotion = require("@fluentui/react-motion");
|
|
const createScalePresence = ({ enterDuration = _reactmotion.motionTokens.durationGentle, enterEasing = _reactmotion.motionTokens.curveDecelerateMax, exitDuration = _reactmotion.motionTokens.durationNormal, exitEasing = _reactmotion.motionTokens.curveAccelerateMax } = {})=>({ animateOpacity = true })=>{
|
|
const fromOpacity = animateOpacity ? 0 : 1;
|
|
const toOpacity = 1;
|
|
const fromScale = 0.9; // Could be a custom param in the future
|
|
const toScale = 1;
|
|
const enterKeyframes = [
|
|
{
|
|
opacity: fromOpacity,
|
|
transform: `scale3d(${fromScale}, ${fromScale}, 1)`,
|
|
visibility: 'visible'
|
|
},
|
|
{
|
|
opacity: toOpacity,
|
|
transform: `scale3d(${toScale}, ${toScale}, 1)`
|
|
}
|
|
];
|
|
const exitKeyframes = [
|
|
{
|
|
opacity: toOpacity,
|
|
transform: `scale3d(${toScale}, ${toScale}, 1)`
|
|
},
|
|
{
|
|
opacity: fromOpacity,
|
|
transform: `scale3d(${fromScale}, ${fromScale}, 1)`,
|
|
visibility: 'hidden'
|
|
}
|
|
];
|
|
return {
|
|
enter: {
|
|
duration: enterDuration,
|
|
easing: enterEasing,
|
|
keyframes: enterKeyframes
|
|
},
|
|
exit: {
|
|
duration: exitDuration,
|
|
easing: exitEasing,
|
|
keyframes: exitKeyframes
|
|
}
|
|
};
|
|
};
|
|
const Scale = (0, _reactmotion.createPresenceComponent)(createScalePresence());
|
|
const ScaleSnappy = (0, _reactmotion.createPresenceComponent)(createScalePresence({
|
|
enterDuration: _reactmotion.motionTokens.durationNormal,
|
|
enterEasing: _reactmotion.motionTokens.curveDecelerateMax,
|
|
exitDuration: _reactmotion.motionTokens.durationFast,
|
|
exitEasing: _reactmotion.motionTokens.curveAccelerateMax
|
|
}));
|
|
const ScaleRelaxed = (0, _reactmotion.createPresenceComponent)(createScalePresence({
|
|
enterDuration: _reactmotion.motionTokens.durationSlow,
|
|
enterEasing: _reactmotion.motionTokens.curveDecelerateMax,
|
|
exitDuration: _reactmotion.motionTokens.durationGentle,
|
|
exitEasing: _reactmotion.motionTokens.curveAccelerateMax
|
|
}));
|