@fluentui/react-northstar
Version:
A themable React component library.
335 lines (334 loc) • 7.19 kB
JavaScript
import { decelerateMax, accelerateMax } from './timingFunctions';
import { ultraFast, faster, fast, normal, slow, slower, ultraSlow } from './durations';
export var scaleAnimations = {
// Scale in w/ fade- UltraFast
scaleEnterUltraFast: {
keyframe: function keyframe(_ref) {
var delta = _ref.delta;
return {
'0%': {
transform: "scale(" + delta + ")",
opacity: 0
},
'100%': {
transform: 'scale(1)',
opacity: 1
}
};
},
keyframeParams: {
delta: 0.88
},
duration: ultraFast,
timingFunction: decelerateMax,
fillMode: 'forwards'
},
// Scale in w/ fade- Faster
scaleEnterFaster: {
keyframe: function keyframe(_ref2) {
var delta = _ref2.delta;
return {
'0%': {
transform: "scale(" + delta + ")",
opacity: 0
},
'100%': {
transform: 'scale(1)',
opacity: 1
}
};
},
keyframeParams: {
delta: 0.88
},
duration: faster,
timingFunction: decelerateMax,
fillMode: 'forwards'
},
// Scale in w/ fade- Fast
scaleEnterFast: {
keyframe: function keyframe(_ref3) {
var delta = _ref3.delta;
return {
'0%': {
transform: "scale(" + delta + ")",
opacity: 0
},
'100%': {
transform: 'scale(1)',
opacity: 1
}
};
},
keyframeParams: {
delta: 0.88
},
duration: fast,
timingFunction: decelerateMax,
fillMode: 'forwards'
},
// Scale in w/ fade- Normal
scaleEnterNormal: {
keyframe: function keyframe(_ref4) {
var delta = _ref4.delta;
return {
'0%': {
transform: "scale(" + delta + ")",
opacity: 0
},
'100%': {
transform: 'scale(1)',
opacity: 1
}
};
},
keyframeParams: {
delta: 0.88
},
duration: normal,
timingFunction: decelerateMax,
fillMode: 'forwards'
},
// Scale in w/ fade - Slow
scaleEnterSlow: {
keyframe: function keyframe(_ref5) {
var delta = _ref5.delta;
return {
'0%': {
transform: "scale(" + delta + ")",
opacity: 0
},
'100%': {
transform: 'scale(1)',
opacity: 1
}
};
},
keyframeParams: {
delta: 0.88
},
duration: slow,
timingFunction: decelerateMax,
fillMode: 'forwards'
},
// Scale in w/ fade - Slower
scaleEnterSlower: {
keyframe: function keyframe(_ref6) {
var delta = _ref6.delta;
return {
'0%': {
transform: "scale(" + delta + ")",
opacity: 0
},
'100%': {
transform: 'scale(1)',
opacity: 1
}
};
},
keyframeParams: {
delta: 0.88
},
duration: slower,
timingFunction: decelerateMax,
fillMode: 'forwards'
},
// Scale in w/ fade - UlrtaSlow
scaleEnterUltraSlow: {
keyframe: function keyframe(_ref7) {
var delta = _ref7.delta;
return {
'0%': {
transform: "scale(" + delta + ")",
opacity: 0
},
'100%': {
transform: 'scale(1)',
opacity: 1
}
};
},
keyframeParams: {
delta: 0.88
},
duration: ultraSlow,
timingFunction: decelerateMax,
fillMode: 'forwards'
},
// Scale Out w/ Fade - UltraFast
scaleExitUltraFast: {
keyframe: function keyframe(_ref8) {
var delta = _ref8.delta;
return {
'0%': {
transform: 'scale(1)',
opacity: 1
},
'100%': {
transform: "scale(" + delta + ")",
opacity: 0
}
};
},
keyframeParams: {
delta: 0.9
},
duration: ultraFast,
timingFunction: accelerateMax,
fillMode: 'forwards'
},
// Scale Out w/ Fade - Faster
scaleExitFaster: {
keyframe: function keyframe(_ref9) {
var delta = _ref9.delta;
return {
'0%': {
transform: 'scale(1)',
opacity: 1
},
'100%': {
transform: "scale(" + delta + ")",
opacity: 0
}
};
},
keyframeParams: {
delta: 0.9
},
duration: faster,
timingFunction: accelerateMax,
fillMode: 'forwards'
},
// Scale Out w/ Fade - Fast
scaleExitFast: {
keyframe: function keyframe(_ref10) {
var delta = _ref10.delta;
return {
'0%': {
transform: 'scale(1)',
opacity: 1
},
'100%': {
transform: "scale(" + delta + ")",
opacity: 0
}
};
},
keyframeParams: {
delta: 0.9
},
duration: fast,
timingFunction: accelerateMax,
fillMode: 'forwards'
},
// Scale Out w/ Fade - Normal
scaleExitNormal: {
keyframe: function keyframe(_ref11) {
var delta = _ref11.delta;
return {
'0%': {
transform: 'scale(1)',
opacity: 1
},
'100%': {
transform: "scale(" + delta + ")",
opacity: 0
}
};
},
keyframeParams: {
delta: 0.9
},
duration: normal,
timingFunction: accelerateMax,
fillMode: 'forwards'
},
// Scale Out w/ Fade - Slow
scaleExitSlow: {
keyframe: function keyframe(_ref12) {
var delta = _ref12.delta;
return {
'0%': {
transform: 'scale(1)',
opacity: 1
},
'100%': {
transform: "scale(" + delta + ")",
opacity: 0
}
};
},
keyframeParams: {
delta: 0.9
},
duration: slow,
timingFunction: accelerateMax,
fillMode: 'forwards'
},
// Scale Out w/ Fade - Slower
scaleExitSlower: {
keyframe: function keyframe(_ref13) {
var delta = _ref13.delta;
return {
'0%': {
transform: 'scale(1)',
opacity: 1
},
'100%': {
transform: "scale(" + delta + ")",
opacity: 0
}
};
},
keyframeParams: {
delta: 0.9
},
duration: slower,
timingFunction: accelerateMax,
fillMode: 'forwards'
},
// Scale Out w/ Fade - UltraSlow
scaleExitUltraSlow: {
keyframe: function keyframe(_ref14) {
var delta = _ref14.delta;
return {
'0%': {
transform: 'scale(1)',
opacity: 1
},
'100%': {
transform: "scale(" + delta + ")",
opacity: 0
}
};
},
keyframeParams: {
delta: 0.9
},
duration: ultraSlow,
timingFunction: accelerateMax,
fillMode: 'forwards'
},
scaleDownSoft: {
keyframe: function keyframe(_ref15) {
var delta = _ref15.delta;
return {
'0%': {
transform: 'scale(1)',
opacity: 1
},
'100%': {
transform: "scale(" + delta + ")",
opacity: 0
}
};
},
keyframeParams: {
delta: 0.9
},
duration: '100ms',
timingFunction: 'cubic-bezier(.78, 0, .22, 1)',
fillMode: 'both'
}
};
//# sourceMappingURL=scale.js.map