UNPKG

@fluentui/react-northstar

Version:
1,315 lines (1,306 loc) 31.3 kB
"use strict"; 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