@fluentui/react-northstar
Version:
A themable React component library.
293 lines (291 loc) • 6.15 kB
JavaScript
;
exports.__esModule = true;
exports.fadeInOutAnimations = void 0;
var _timingFunctions = require("./timingFunctions");
var _durations = require("./durations");
var fadeInOutAnimations = {
// Fade Ins
// Basic Fade In Animation -- Ultra Fast
fadeEnterUltraFast: {
keyframe: function keyframe(_ref) {
var delta = _ref.delta;
return {
'0%': {
opacity: delta
},
'100%': {
opacity: 1
}
};
},
keyframeParams: {
delta: 0
},
duration: _durations.ultraFast,
timingFunction: _timingFunctions.linear,
fillMode: 'forwards'
},
// Basic Fade In Animation -- Faster
fadeEnterFaster: {
keyframe: function keyframe(_ref2) {
var delta = _ref2.delta;
return {
'0%': {
opacity: delta
},
'100%': {
opacity: 1
}
};
},
keyframeParams: {
delta: 0
},
duration: _durations.faster,
timingFunction: _timingFunctions.linear,
fillMode: 'forwards'
},
// Basic Fade In Animation -- Fast
fadeEnterFast: {
keyframe: function keyframe(_ref3) {
var delta = _ref3.delta;
return {
'0%': {
opacity: delta
},
'100%': {
opacity: 1
}
};
},
keyframeParams: {
delta: 0
},
duration: _durations.fast,
timingFunction: _timingFunctions.linear,
fillMode: 'forwards'
},
// Basic Fade In Animation --Normal
fadeEnterNormal: {
keyframe: function keyframe(_ref4) {
var delta = _ref4.delta;
return {
'0%': {
opacity: delta
},
'100%': {
opacity: 1
}
};
},
keyframeParams: {
delta: 0
},
duration: _durations.normal,
timingFunction: _timingFunctions.linear,
fillMode: 'forwards'
},
// Basic Fade In Animation --Slow
fadeEnterSlow: {
keyframe: function keyframe(_ref5) {
var delta = _ref5.delta;
return {
'0%': {
opacity: delta
},
'100%': {
opacity: 1
}
};
},
keyframeParams: {
delta: 0
},
duration: _durations.slow,
timingFunction: _timingFunctions.linear,
fillMode: 'forwards'
},
// Basic Fade In Animation --Slow
fadeEnterSlower: {
keyframe: function keyframe(_ref6) {
var delta = _ref6.delta;
return {
'0%': {
opacity: delta
},
'100%': {
opacity: 1
}
};
},
keyframeParams: {
delta: 0
},
duration: _durations.slower,
timingFunction: _timingFunctions.linear,
fillMode: 'forwards'
},
// Basic Fade In Animation --UltraSlow
fadeEnterUltraSlow: {
keyframe: function keyframe(_ref7) {
var delta = _ref7.delta;
return {
'0%': {
opacity: delta
},
'100%': {
opacity: 1
}
};
},
keyframeParams: {
delta: 0
},
duration: _durations.ultraSlow,
timingFunction: _timingFunctions.linear,
fillMode: 'forwards'
},
// Fade Outs
// Basic Fade Out Animation --UltraFast
fadeExitUltraFast: {
keyframe: function keyframe(_ref8) {
var delta = _ref8.delta;
return {
'0%': {
opacity: 1
},
'100%': {
opacity: delta
}
};
},
keyframeParams: {
delta: 0
},
duration: _durations.ultraFast,
timingFunction: _timingFunctions.linear,
fillMode: 'forwards'
},
// Basic Fade Out Animation --Faster
fadeExitFaster: {
keyframe: function keyframe(_ref9) {
var delta = _ref9.delta;
return {
'0%': {
opacity: 1
},
'100%': {
opacity: delta
}
};
},
keyframeParams: {
delta: 0
},
duration: _durations.faster,
timingFunction: _timingFunctions.linear,
fillMode: 'forwards'
},
// Basic Fade Out Animation --Fast
fadeExitFast: {
keyframe: function keyframe(_ref10) {
var delta = _ref10.delta;
return {
'0%': {
opacity: 1
},
'100%': {
opacity: delta
}
};
},
keyframeParams: {
delta: 0
},
duration: _durations.fast,
timingFunction: _timingFunctions.linear,
fillMode: 'forwards'
},
// Basic Fade Out Animation --Normal
fadeExitNormal: {
keyframe: function keyframe(_ref11) {
var delta = _ref11.delta;
return {
'0%': {
opacity: 1
},
'100%': {
opacity: delta
}
};
},
keyframeParams: {
delta: 0
},
duration: _durations.normal,
timingFunction: _timingFunctions.linear,
fillMode: 'forwards'
},
// Basic Fade Out Animation --Slow
fadeExitSlow: {
keyframe: function keyframe(_ref12) {
var delta = _ref12.delta;
return {
'0%': {
opacity: 1
},
'100%': {
opacity: delta
}
};
},
keyframeParams: {
delta: 0
},
duration: _durations.slow,
timingFunction: _timingFunctions.linear,
fillMode: 'forwards'
},
// Basic Fade Out Animation --Slower
fadeExitSlower: {
keyframe: function keyframe(_ref13) {
var delta = _ref13.delta;
return {
'0%': {
opacity: 1
},
'100%': {
opacity: delta
}
};
},
keyframeParams: {
delta: 0
},
duration: _durations.slower,
timingFunction: _timingFunctions.linear,
fillMode: 'forwards'
},
// Basic Fade Out Animation --UltraSlow
fadeExitUltraSlow: {
keyframe: function keyframe(_ref14) {
var delta = _ref14.delta;
return {
'0%': {
opacity: 1
},
'100%': {
opacity: delta
}
};
},
keyframeParams: {
delta: 0
},
duration: _durations.ultraSlow,
timingFunction: _timingFunctions.linear,
fillMode: 'forwards'
}
};
exports.fadeInOutAnimations = fadeInOutAnimations;
//# sourceMappingURL=fade.js.map