@fluentui/react-northstar
Version:
A themable React component library.
1,315 lines (1,306 loc) • 31.3 kB
JavaScript
exports.__esModule = true;
exports.slideAnimations = void 0;
var _timingFunctions = require("./timingFunctions");
var _durations = require("./durations");
var slideAnimations = {
// Slide Down Animations
// Slides object down to original position --ultrafast
slideDownEnterUltraFast: {
keyframe: function keyframe(_ref) {
var delta = _ref.delta;
return {
'0%': {
transform: "translateY(-" + delta + ")",
opacity: 0
},
'100%': {
transform: 'translateY(0px)',
opacity: 1
}
};
},
keyframeParams: {
delta: '20px'
},
duration: _durations.ultraFast,
timingFunction: _timingFunctions.decelerateMax,
direction: 'forward',
fillMode: 'forwards'
},
// Slides object down to original position -Faster
slideDownEnterFaster: {
keyframe: function keyframe(_ref2) {
var delta = _ref2.delta;
return {
'0%': {
transform: "translateY(-" + delta + ")",
opacity: 0
},
'100%': {
transform: 'translateY(0px)',
opacity: 1
}
};
},
keyframeParams: {
delta: '20px'
},
duration: _durations.faster,
timingFunction: _timingFunctions.decelerateMax,
direction: 'forward',
fillMode: 'forwards'
},
// Slides object down to original position -fast
slideDownEnterFast: {
keyframe: function keyframe(_ref3) {
var delta = _ref3.delta;
return {
'0%': {
transform: "translateY(-" + delta + ")",
opacity: 0
},
'100%': {
transform: 'translateY(0px)',
opacity: 1
}
};
},
keyframeParams: {
delta: '20px'
},
duration: _durations.fast,
timingFunction: _timingFunctions.decelerateMax,
direction: 'forward',
fillMode: 'forwards'
},
// Slides object in from top to bottom --normal
slideDownEnterNormal: {
keyframe: function keyframe(_ref4) {
var delta = _ref4.delta;
return {
'0%': {
transform: "translateY(-" + delta + ")",
opacity: 0
},
'100%': {
transform: 'translateY(0px)',
opacity: 1
}
};
},
keyframeParams: {
delta: '20px'
},
duration: _durations.normal,
timingFunction: _timingFunctions.decelerateMax,
direction: 'forward',
fillMode: 'forwards'
},
// Slides object in from top to bottom --slow
slideDownEnterSlow: {
keyframe: function keyframe(_ref5) {
var delta = _ref5.delta;
return {
'0%': {
transform: "translateY(-" + delta + ")",
opacity: 0
},
'100%': {
transform: 'translateY(0px)',
opacity: 1
}
};
},
keyframeParams: {
delta: '20px'
},
duration: _durations.slow,
timingFunction: _timingFunctions.decelerateMax,
direction: 'forward',
fillMode: 'forwards'
},
// Slides object in from top to bottom --slower
slideDownEnterSlower: {
keyframe: function keyframe(_ref6) {
var delta = _ref6.delta;
return {
'0%': {
transform: "translateY(-" + delta + ")",
opacity: 0
},
'100%': {
transform: 'translateY(0px)',
opacity: 1
}
};
},
keyframeParams: {
delta: '20px'
},
duration: _durations.slower,
timingFunction: _timingFunctions.decelerateMax,
direction: 'forward',
fillMode: 'forwards'
},
// Slides object in from top to bottom - Slow
slideDownEnterUltraSlow: {
keyframe: function keyframe(_ref7) {
var delta = _ref7.delta;
return {
'0%': {
transform: "translateY(-" + delta + ")",
opacity: 0
},
'100%': {
transform: 'translateY(0px)',
opacity: 1
}
};
},
keyframeParams: {
delta: '20px'
},
duration: _durations.ultraSlow,
timingFunction: _timingFunctions.decelerateMax,
direction: 'forward',
fillMode: 'forwards'
},
// Slide Up Animations
// Slides object in from top to bottom --ultrafast
slideUpEnterUltraFast: {
keyframe: function keyframe(_ref8) {
var delta = _ref8.delta;
return {
'0%': {
transform: "translateY(" + delta + ")",
opacity: 0
},
'100%': {
transform: 'translateY(0px)',
opacity: 1
}
};
},
keyframeParams: {
delta: '20px'
},
duration: _durations.ultraFast,
timingFunction: _timingFunctions.decelerateMax,
direction: 'forward',
fillMode: 'forwards'
},
// Slides object in from top to bottom --faster
slideUpEnterFaster: {
keyframe: function keyframe(_ref9) {
var delta = _ref9.delta;
return {
'0%': {
transform: "translateY(" + delta + ")",
opacity: 0
},
'100%': {
transform: 'translateY(0px)',
opacity: 1
}
};
},
keyframeParams: {
delta: '20px'
},
duration: _durations.faster,
timingFunction: _timingFunctions.decelerateMax,
direction: 'forward',
fillMode: 'forwards'
},
// Slides object in from top to bottom --fast
slideUpEnterFast: {
keyframe: function keyframe(_ref10) {
var delta = _ref10.delta;
return {
'0%': {
transform: "translateY(" + delta + ")",
opacity: 0
},
'100%': {
transform: 'translateY(0px)',
opacity: 1
}
};
},
keyframeParams: {
delta: '20px'
},
duration: _durations.fast,
timingFunction: _timingFunctions.decelerateMax,
direction: 'forward',
fillMode: 'forwards'
},
// Slides object in from down to up-normal
slideUpEnterNormal: {
keyframe: function keyframe(_ref11) {
var delta = _ref11.delta;
return {
'0%': {
transform: "translateY(" + delta + ")",
opacity: 0
},
'100%': {
transform: 'translateY(0px)',
opacity: 1
}
};
},
keyframeParams: {
delta: '20px'
},
duration: _durations.normal,
timingFunction: _timingFunctions.decelerateMax,
direction: 'forward',
fillMode: 'forwards'
},
// Slides object in from top to bottom --slow
slideUpEnterSlow: {
keyframe: function keyframe(_ref12) {
var delta = _ref12.delta;
return {
'0%': {
transform: "translateY(" + delta + ")",
opacity: 0
},
'100%': {
transform: 'translateY(0px)',
opacity: 1
}
};
},
keyframeParams: {
delta: '20px'
},
duration: _durations.slow,
timingFunction: _timingFunctions.decelerateMax,
direction: 'forward',
fillMode: 'forwards'
},
// Slides object in from bottom to top - slower
slideUpEnterSlower: {
keyframe: function keyframe(_ref13) {
var delta = _ref13.delta;
return {
'0%': {
transform: "translateY(" + delta + ")",
opacity: 0
},
'100%': {
transform: 'translateY(0px)',
opacity: 1
}
};
},
keyframeParams: {
delta: '20px'
},
duration: _durations.slower,
timingFunction: _timingFunctions.decelerateMax,
direction: 'forward',
fillMode: 'forwards'
},
// Slides object in from bottom to top - ultraslow
slideUpEnterUltraSlow: {
keyframe: function keyframe(_ref14) {
var delta = _ref14.delta;
return {
'0%': {
transform: "translateY(" + delta + ")",
opacity: 0
},
'100%': {
transform: 'translateY(0px)',
opacity: 1
}
};
},
keyframeParams: {
delta: '20px'
},
duration: _durations.ultraSlow,
timingFunction: _timingFunctions.decelerateMax,
direction: 'forward',
fillMode: 'forwards'
},
// ---Horizontal Slide Animations---- //
// Slide Left Animations
// Slides object in from right to left --ultrafast
slideLeftEnterUltraFast: {
keyframe: function keyframe(_ref15) {
var delta = _ref15.delta;
return {
'0%': {
transform: "translateX(" + delta + ")",
opacity: 0
},
'100%': {
transform: 'translateX(0px)',
opacity: 1
}
};
},
keyframeParams: {
delta: '20px'
},
duration: _durations.ultraFast,
timingFunction: _timingFunctions.decelerateMax,
direction: 'forward',
fillMode: 'forwards'
},
// Slides object in from right to left -faster
slideLeftEnterFaster: {
keyframe: function keyframe(_ref16) {
var delta = _ref16.delta;
return {
'0%': {
transform: "translateX(" + delta + ")",
opacity: 0
},
'100%': {
transform: 'translateX(0px)',
opacity: 1
}
};
},
keyframeParams: {
delta: '20px'
},
duration: _durations.faster,
timingFunction: _timingFunctions.decelerateMax,
direction: 'forward',
fillMode: 'forwards'
},
// Slides object in from right to left -Fast
slideLeftEnterFast: {
keyframe: function keyframe(_ref17) {
var delta = _ref17.delta;
return {
'0%': {
transform: "translateX(" + delta + ")",
opacity: 0
},
'100%': {
transform: 'translateX(0px)',
opacity: 1
}
};
},
keyframeParams: {
delta: '20px'
},
duration: _durations.fast,
timingFunction: _timingFunctions.decelerateMax,
direction: 'forward',
fillMode: 'forwards'
},
// Slides object in from right to left -Normal
slideLeftEnterNormal: {
keyframe: function keyframe(_ref18) {
var delta = _ref18.delta;
return {
'0%': {
transform: "translateX(" + delta + ")",
opacity: 0
},
'100%': {
transform: 'translateX(0px)',
opacity: 1
}
};
},
keyframeParams: {
delta: '200px'
},
duration: _durations.normal,
timingFunction: _timingFunctions.decelerateMax,
direction: 'forward',
fillMode: 'forwards'
},
// Slides object in from right to left -Slow
slideLeftEnterSlow: {
keyframe: function keyframe(_ref19) {
var delta = _ref19.delta;
return {
'0%': {
transform: "translateX(" + delta + ")",
opacity: 0
},
'100%': {
transform: 'translateX(0px)',
opacity: 1
}
};
},
keyframeParams: {
delta: '20px'
},
duration: _durations.slow,
timingFunction: _timingFunctions.decelerateMax,
direction: 'forward',
fillMode: 'forwards'
},
// Slides object in from right to left - slower
slideLeftEnterSlower: {
keyframe: function keyframe(_ref20) {
var delta = _ref20.delta;
return {
'0%': {
transform: "translateX(" + delta + ")",
opacity: 0
},
'100%': {
transform: 'translateX(0px)',
opacity: 1
}
};
},
keyframeParams: {
delta: '20px'
},
duration: _durations.slower,
timingFunction: _timingFunctions.decelerateMax,
direction: 'forward',
fillMode: 'forwards'
},
// Slides object in from right to left - ultraslow
slideLeftEnterUltraSlow: {
keyframe: function keyframe(_ref21) {
var delta = _ref21.delta;
return {
'0%': {
transform: "translateX(" + delta + ")",
opacity: 0
},
'100%': {
transform: 'translateX(0px)',
opacity: 1
}
};
},
keyframeParams: {
delta: '20px'
},
duration: _durations.ultraSlow,
timingFunction: _timingFunctions.decelerateMax,
direction: 'forward',
fillMode: 'forwards'
},
// Slide Right Animations
// Slides object in from left to right -ultrafast
slideRightEnterUltraFast: {
keyframe: function keyframe(_ref22) {
var delta = _ref22.delta;
return {
'0%': {
transform: "translateX(-" + delta + ")",
opacity: 0
},
'100%': {
transform: 'translateX(0px)',
opacity: 1
}
};
},
keyframeParams: {
delta: '20px'
},
duration: _durations.ultraFast,
timingFunction: _timingFunctions.decelerateMax,
direction: 'forward',
fillMode: 'forwards'
},
// Slides object in from left to right - Faster
slideRightEnterFaster: {
keyframe: function keyframe(_ref23) {
var delta = _ref23.delta;
return {
'0%': {
transform: "translateX(-" + delta + ")",
opacity: 0
},
'100%': {
transform: 'translateX(0px)',
opacity: 1
}
};
},
keyframeParams: {
delta: '20px'
},
duration: _durations.faster,
timingFunction: _timingFunctions.decelerateMax,
direction: 'forward',
fillMode: 'forwards'
},
// Slides object in from left to right -fast
slideRightEnterFast: {
keyframe: function keyframe(_ref24) {
var delta = _ref24.delta;
return {
'0%': {
transform: "translateX(-" + delta + ")",
opacity: 0
},
'100%': {
transform: 'translateX(0px)',
opacity: 1
}
};
},
keyframeParams: {
delta: '20px'
},
duration: _durations.fast,
timingFunction: _timingFunctions.decelerateMax,
direction: 'forward',
fillMode: 'forwards'
},
// Slides object in from left to right -normal
slideRightEnterNormal: {
keyframe: function keyframe(_ref25) {
var delta = _ref25.delta;
return {
'0%': {
transform: "translateX(-" + delta + ")",
opacity: 0
},
'100%': {
transform: 'translateX(0px)',
opacity: 1
}
};
},
keyframeParams: {
delta: '200px'
},
duration: _durations.normal,
timingFunction: _timingFunctions.decelerateMax,
direction: 'forward',
fillMode: 'forwards'
},
// Slides object in from left to right -slow
slideRightEnterSlow: {
keyframe: function keyframe(_ref26) {
var delta = _ref26.delta;
return {
'0%': {
transform: "translateX(-" + delta + ")",
opacity: 0
},
'100%': {
transform: 'translateX(0px)',
opacity: 1
}
};
},
keyframeParams: {
delta: '20px'
},
duration: _durations.slow,
timingFunction: _timingFunctions.decelerateMax,
direction: 'forward',
fillMode: 'forwards'
},
// Slides object in from left to right- slower
slideRightEnterSlower: {
keyframe: function keyframe(_ref27) {
var delta = _ref27.delta;
return {
'0%': {
transform: "translateX(-" + delta + ")",
opacity: 0
},
'100%': {
transform: 'translateX(0px)',
opacity: 1
}
};
},
keyframeParams: {
delta: '20px'
},
duration: _durations.slower,
timingFunction: _timingFunctions.decelerateMax,
direction: 'forward',
fillMode: 'forwards'
},
// Slides object in from left to right- ultraslow
slideRightEnterUltraSlow: {
keyframe: function keyframe(_ref28) {
var delta = _ref28.delta;
return {
'0%': {
transform: "translateX(-" + delta + ")",
opacity: 0
},
'100%': {
transform: 'translateX(0px)',
opacity: 1
}
};
},
keyframeParams: {
delta: '20px'
},
duration: _durations.ultraSlow,
timingFunction: _timingFunctions.decelerateMax,
direction: 'forward',
fillMode: 'forwards'
},
// Slide Exit Animation///
// Slide Down - Exit - UltraFast
slideDownExitUltraFast: {
keyframe: function keyframe(_ref29) {
var delta = _ref29.delta;
return {
'0%': {
transform: 'translateY(0px)',
opacity: 1
},
'100%': {
transform: "translateY(" + delta + ")",
opacity: 0
}
};
},
keyframeParams: {
delta: '20px'
},
duration: _durations.ultraFast,
timingFunction: _timingFunctions.accelerateMax,
direction: 'forward',
fillMode: 'forwards'
},
// Slide Down - Exit - Faster
slideDownExitFaster: {
keyframe: function keyframe(_ref30) {
var delta = _ref30.delta;
return {
'0%': {
transform: 'translateY(0px)',
opacity: 1
},
'100%': {
transform: "translateY(" + delta + ")",
opacity: 0
}
};
},
keyframeParams: {
delta: '20px'
},
duration: _durations.faster,
timingFunction: _timingFunctions.accelerateMax,
direction: 'forward',
fillMode: 'forwards'
},
// Slide Down - Exit - Fast
slideDownExitFast: {
keyframe: function keyframe(_ref31) {
var delta = _ref31.delta;
return {
'0%': {
transform: 'translateY(0px)',
opacity: 1
},
'100%': {
transform: "translateY(" + delta + ")",
opacity: 0
}
};
},
keyframeParams: {
delta: '20px'
},
duration: _durations.fast,
timingFunction: _timingFunctions.accelerateMax,
direction: 'forward',
fillMode: 'forwards'
},
// Slide Down - Exit - Normal
slideDownExitNormal: {
keyframe: function keyframe(_ref32) {
var delta = _ref32.delta;
return {
'0%': {
transform: 'translateY(0px)',
opacity: 1
},
'100%': {
transform: "translateY(" + delta + ")",
opacity: 0
}
};
},
keyframeParams: {
delta: '20px'
},
duration: _durations.normal,
timingFunction: _timingFunctions.accelerateMax,
direction: 'forward',
fillMode: 'forwards'
},
// Slide Down - Exit - Slow
slideDownExitSlow: {
keyframe: function keyframe(_ref33) {
var delta = _ref33.delta;
return {
'0%': {
transform: 'translateY(0px)',
opacity: 1
},
'100%': {
transform: "translateY(" + delta + ")",
opacity: 0
}
};
},
keyframeParams: {
delta: '20px'
},
duration: _durations.slow,
timingFunction: _timingFunctions.accelerateMax,
direction: 'forward',
fillMode: 'forwards'
},
// Slide Down - Exit - Slower
slideDownExitSlower: {
keyframe: function keyframe(_ref34) {
var delta = _ref34.delta;
return {
'0%': {
transform: 'translateY(0px)',
opacity: 1
},
'100%': {
transform: "translateY(" + delta + ")",
opacity: 0
}
};
},
keyframeParams: {
delta: '20px'
},
duration: _durations.slower,
timingFunction: _timingFunctions.accelerateMax,
direction: 'forward',
fillMode: 'forwards'
},
// Slide Down - Exit - Ultraslow
slideDownExitUltraSlow: {
keyframe: function keyframe(_ref35) {
var delta = _ref35.delta;
return {
'0%': {
transform: 'translateY(0px)',
opacity: 1
},
'100%': {
transform: "translateY(" + delta + ")",
opacity: 0
}
};
},
keyframeParams: {
delta: '20px'
},
duration: _durations.ultraSlow,
timingFunction: _timingFunctions.accelerateMax,
direction: 'forward',
fillMode: 'forwards'
},
// Slide Up - Exit- Animations
// Slide Up - Exit - UltraFast
slideUpExitUltraFast: {
keyframe: function keyframe(_ref36) {
var delta = _ref36.delta;
return {
'0%': {
transform: 'translateY(0px)',
opacity: 1
},
'100%': {
transform: "translateY(-" + delta + ")",
opacity: 0
}
};
},
keyframeParams: {
delta: '20px'
},
duration: _durations.ultraFast,
timingFunction: _timingFunctions.accelerateMax,
direction: 'forward',
fillMode: 'forwards'
},
// Slide Up - Exit - Faster
slideUpExitFaster: {
keyframe: function keyframe(_ref37) {
var delta = _ref37.delta;
return {
'0%': {
transform: 'translateY(0px)',
opacity: 1
},
'100%': {
transform: "translateY(-" + delta + ")",
opacity: 0
}
};
},
keyframeParams: {
delta: '20px'
},
duration: _durations.faster,
timingFunction: _timingFunctions.accelerateMax,
direction: 'forward',
fillMode: 'forwards'
},
// Slide Up - Exit - Fast
slideUpExitFast: {
keyframe: function keyframe(_ref38) {
var delta = _ref38.delta;
return {
'0%': {
transform: 'translateY(0px)',
opacity: 1
},
'100%': {
transform: "translateY(-" + delta + ")",
opacity: 0
}
};
},
keyframeParams: {
delta: '20px'
},
duration: _durations.fast,
timingFunction: _timingFunctions.accelerateMax,
direction: 'forward',
fillMode: 'forwards'
},
// Slide Up - Exit - Normal
slideUpExitNormal: {
keyframe: function keyframe(_ref39) {
var delta = _ref39.delta;
return {
'0%': {
transform: 'translateY(0px)',
opacity: 1
},
'100%': {
transform: "translateY(-" + delta + ")",
opacity: 0
}
};
},
keyframeParams: {
delta: '20px'
},
duration: _durations.normal,
timingFunction: _timingFunctions.accelerateMax,
direction: 'forward',
fillMode: 'forwards'
},
// Slide Up - Exit - Slow
slideUpExitSlow: {
keyframe: function keyframe(_ref40) {
var delta = _ref40.delta;
return {
'0%': {
transform: 'translateY(0px)',
opacity: 1
},
'100%': {
transform: "translateY(-" + delta + ")",
opacity: 0
}
};
},
keyframeParams: {
delta: '20px'
},
duration: _durations.slow,
timingFunction: _timingFunctions.accelerateMax,
direction: 'forward',
fillMode: 'forwards'
},
// Slide Up - Exit - Slower
slideUpExitSlower: {
keyframe: function keyframe(_ref41) {
var delta = _ref41.delta;
return {
'0%': {
transform: 'translateY(0px)',
opacity: 1
},
'100%': {
transform: "translateY(-" + delta + ")",
opacity: 0
}
};
},
keyframeParams: {
delta: '20px'
},
duration: _durations.slower,
timingFunction: _timingFunctions.accelerateMax,
direction: 'forward',
fillMode: 'forwards'
},
// Slide Up - Exit - Ultra Slow
slideUpExitUltraSlow: {
keyframe: function keyframe(_ref42) {
var delta = _ref42.delta;
return {
'0%': {
transform: 'translateY(0px)',
opacity: 1
},
'100%': {
transform: "translateY(-" + delta + ")",
opacity: 0
}
};
},
keyframeParams: {
delta: '20px'
},
duration: _durations.ultraSlow,
timingFunction: _timingFunctions.accelerateMax,
direction: 'forward',
fillMode: 'forwards'
},
// Slide Right Exit Animations
// Slide Right Exit - Ultrafast
slideRightExitUltraFast: {
keyframe: function keyframe(_ref43) {
var delta = _ref43.delta;
return {
'0%': {
transform: 'translateX(0px)',
opacity: 1
},
'100%': {
transform: "translateX(" + delta + ")",
opacity: 0
}
};
},
keyframeParams: {
delta: '20px'
},
duration: _durations.ultraFast,
timingFunction: _timingFunctions.accelerateMax,
direction: 'forward',
fillMode: 'forwards'
},
// Slide Right Exit - Faster
slideRightExitFaster: {
keyframe: function keyframe(_ref44) {
var delta = _ref44.delta;
return {
'0%': {
transform: 'translateX(0px)',
opacity: 1
},
'100%': {
transform: "translateX(" + delta + ")",
opacity: 0
}
};
},
keyframeParams: {
delta: '20px'
},
duration: _durations.faster,
timingFunction: _timingFunctions.accelerateMax,
direction: 'forward',
fillMode: 'forwards'
},
// Slide Right Exit - Fast
slideRightExitFast: {
keyframe: function keyframe(_ref45) {
var delta = _ref45.delta;
return {
'0%': {
transform: 'translateX(0px)',
opacity: 1
},
'100%': {
transform: "translateX(" + delta + ")",
opacity: 0
}
};
},
keyframeParams: {
delta: '20px'
},
duration: _durations.fast,
timingFunction: _timingFunctions.accelerateMax,
direction: 'forward',
fillMode: 'forwards'
},
// Slide Right Exit - Normal
slideRightExitNormal: {
keyframe: function keyframe(_ref46) {
var delta = _ref46.delta;
return {
'0%': {
transform: 'translateX(0px)',
opacity: 1
},
'100%': {
transform: "translateX(" + delta + ")",
opacity: 0
}
};
},
keyframeParams: {
delta: '20px'
},
duration: _durations.normal,
timingFunction: _timingFunctions.accelerateMax,
direction: 'forward',
fillMode: 'forwards'
},
// Slide Right Exit - Slow
slideRightExitSlow: {
keyframe: function keyframe(_ref47) {
var delta = _ref47.delta;
return {
'0%': {
transform: 'translateX(0px)',
opacity: 1
},
'100%': {
transform: "translateX(" + delta + ")",
opacity: 0
}
};
},
keyframeParams: {
delta: '20px'
},
duration: _durations.slow,
timingFunction: _timingFunctions.accelerateMax,
direction: 'forward',
fillMode: 'forwards'
},
// Slide Right Exit - Ultrafast
slideRightExitSlower: {
keyframe: function keyframe(_ref48) {
var delta = _ref48.delta;
return {
'0%': {
transform: 'translateX(0px)',
opacity: 1
},
'100%': {
transform: "translateX(" + delta + ")",
opacity: 0
}
};
},
keyframeParams: {
delta: '20px'
},
duration: _durations.slower,
timingFunction: _timingFunctions.accelerateMax,
direction: 'forward',
fillMode: 'forwards'
},
// Slide Right Exit - Ultraslow
slideRightExitUltraSlow: {
keyframe: function keyframe(_ref49) {
var delta = _ref49.delta;
return {
'0%': {
transform: 'translateX(0px)',
opacity: 1
},
'100%': {
transform: "translateX(" + delta + ")",
opacity: 0
}
};
},
keyframeParams: {
delta: '20px'
},
duration: _durations.ultraSlow,
timingFunction: _timingFunctions.accelerateMax,
direction: 'forward',
fillMode: 'forwards'
},
// Slide Left Exit Aniamtions
// Slide Left Exit -ultrafast
slideLeftExitUltraFast: {
keyframe: function keyframe(_ref50) {
var delta = _ref50.delta;
return {
'0%': {
transform: 'translateX(0px)',
opacity: 1
},
'100%': {
transform: "translateX(-" + delta + ")",
opacity: 0
}
};
},
keyframeParams: {
delta: '20px'
},
duration: _durations.ultraFast,
timingFunction: _timingFunctions.accelerateMax,
direction: 'forward',
fillMode: 'forwards'
},
// Slide Left Exit -Faster
slideLeftExitFaster: {
keyframe: function keyframe(_ref51) {
var delta = _ref51.delta;
return {
'0%': {
transform: 'translateX(0px)',
opacity: 1
},
'100%': {
transform: "translateX(-" + delta + ")",
opacity: 0
}
};
},
keyframeParams: {
delta: '20px'
},
duration: _durations.faster,
timingFunction: _timingFunctions.accelerateMax,
direction: 'forward',
fillMode: 'forwards'
},
// Slide Left Exit -Fast
slideLeftExitFast: {
keyframe: function keyframe(_ref52) {
var delta = _ref52.delta;
return {
'0%': {
transform: 'translateX(0px)',
opacity: 1
},
'100%': {
transform: "translateX(-" + delta + ")",
opacity: 0
}
};
},
keyframeParams: {
delta: '20px'
},
duration: _durations.fast,
timingFunction: _timingFunctions.accelerateMax,
direction: 'forward',
fillMode: 'forwards'
},
// Slide Left Exit -Normal
slideLeftExitNormal: {
keyframe: function keyframe(_ref53) {
var delta = _ref53.delta;
return {
'0%': {
transform: 'translateX(0px)',
opacity: 1
},
'100%': {
transform: "translateX(-" + delta + ")",
opacity: 0
}
};
},
keyframeParams: {
delta: '20px'
},
duration: _durations.normal,
timingFunction: _timingFunctions.accelerateMax,
direction: 'forward',
fillMode: 'forwards'
},
// Slide Left Exit -Slow
slideLeftExitSlow: {
keyframe: function keyframe(_ref54) {
var delta = _ref54.delta;
return {
'0%': {
transform: 'translateX(0px)',
opacity: 1
},
'100%': {
transform: "translateX(-" + delta + ")",
opacity: 0
}
};
},
keyframeParams: {
delta: '20px'
},
duration: _durations.slow,
timingFunction: _timingFunctions.accelerateMax,
direction: 'forward',
fillMode: 'forwards'
},
// Slide Left Exit -Slower
slideLeftExitSlower: {
keyframe: function keyframe(_ref55) {
var delta = _ref55.delta;
return {
'0%': {
transform: 'translateX(0px)',
opacity: 1
},
'100%': {
transform: "translateX(-" + delta + ")",
opacity: 0
}
};
},
keyframeParams: {
delta: '20px'
},
duration: _durations.slower,
timingFunction: _timingFunctions.accelerateMax,
direction: 'forward',
fillMode: 'forwards'
},
// Slide Left Exit -Ultraslow
slideLeftExitUltraSlow: {
keyframe: function keyframe(_ref56) {
var delta = _ref56.delta;
return {
'0%': {
transform: 'translateX(0px)',
opacity: 1
},
'100%': {
transform: "translateX(-" + delta + ")",
opacity: 0
}
};
},
keyframeParams: {
delta: '20px'
},
duration: _durations.ultraSlow,
timingFunction: _timingFunctions.accelerateMax,
direction: 'forward',
fillMode: 'forwards'
}
};
exports.slideAnimations = slideAnimations;
//# sourceMappingURL=slide.js.map
;