diff --git a/src/animations/sliding_exits/index.ts b/src/animations/sliding_exits/index.ts new file mode 100644 index 0000000..33898cb --- /dev/null +++ b/src/animations/sliding_exits/index.ts @@ -0,0 +1,4 @@ +export { default as slideOutDown } from "./slideOutDown"; +export { default as slideOutLeft } from "./slideOutLeft"; +export { default as slideOutRight } from "./slideOutRight"; +export { default as slideOutUp } from "./slideOutUp"; diff --git a/src/animations/sliding_exits/slideOutDown.ts b/src/animations/sliding_exits/slideOutDown.ts new file mode 100644 index 0000000..eec40d8 --- /dev/null +++ b/src/animations/sliding_exits/slideOutDown.ts @@ -0,0 +1,17 @@ +import { keyframes } from "@emotion/core"; + +/** + * @see {@link https://github.com/animate-css/animate.css/blob/master/source/sliding_exits/slideOutDown.css} + */ +const slideOutDown = keyframes` + from { + transform: translate3d(0, 0, 0); + } + + to { + visibility: hidden; + transform: translate3d(0, 100%, 0); + } +`; + +export default slideOutDown; diff --git a/src/animations/sliding_exits/slideOutLeft.ts b/src/animations/sliding_exits/slideOutLeft.ts new file mode 100644 index 0000000..d011b99 --- /dev/null +++ b/src/animations/sliding_exits/slideOutLeft.ts @@ -0,0 +1,17 @@ +import { keyframes } from "@emotion/core"; + +/** + * @see {@link https://github.com/animate-css/animate.css/blob/master/source/sliding_exits/slideOutLeft.css} + */ +const slideOutLeft = keyframes` + from { + transform: translate3d(0, 0, 0); + } + + to { + visibility: hidden; + transform: translate3d(-100%, 0, 0); + } +`; + +export default slideOutLeft; diff --git a/src/animations/sliding_exits/slideOutRight.ts b/src/animations/sliding_exits/slideOutRight.ts new file mode 100644 index 0000000..de9eac7 --- /dev/null +++ b/src/animations/sliding_exits/slideOutRight.ts @@ -0,0 +1,17 @@ +import { keyframes } from "@emotion/core"; + +/** + * @see {@link https://github.com/animate-css/animate.css/blob/master/source/sliding_exits/slideOutRight.css} + */ +const slideOutRight = keyframes` + from { + transform: translate3d(0, 0, 0); + } + + to { + visibility: hidden; + transform: translate3d(100%, 0, 0); + } +`; + +export default slideOutRight; diff --git a/src/animations/sliding_exits/slideOutUp.ts b/src/animations/sliding_exits/slideOutUp.ts new file mode 100644 index 0000000..5cbfef1 --- /dev/null +++ b/src/animations/sliding_exits/slideOutUp.ts @@ -0,0 +1,17 @@ +import { keyframes } from "@emotion/core"; + +/** + * @see {@link https://github.com/animate-css/animate.css/blob/master/source/sliding_exits/slideOutUp.css} + */ +const slideOutUp = keyframes` + from { + transform: translate3d(0, 0, 0); + } + + to { + visibility: hidden; + transform: translate3d(0, -100%, 0); + } +`; + +export default slideOutUp; diff --git a/src/components/Slide.tsx b/src/components/Slide.tsx index 78ba26d..89196dc 100644 --- a/src/components/Slide.tsx +++ b/src/components/Slide.tsx @@ -8,34 +8,47 @@ import { slideInRight, slideInUp } from "../animations/sliding_entrances"; +import { + slideOutDown, + slideOutLeft, + slideOutRight, + slideOutUp +} from "../animations/sliding_exits"; type SlideDirection = "down" | "left" | "right" | "up"; -interface ZoomProps extends Omit { +interface SlideProps extends Omit { /** * Origin of the animation. * @default undefined */ - direction?: SlideDirection; + direction: SlideDirection; + /** + * Specifies if the animation should make element(s) disappear. + * @default false + */ + reverse?: boolean; } -function getSlideKeyframes(direction?: SlideDirection) { +function getSlideKeyframes(reverse: boolean, direction: SlideDirection) { switch (direction) { case "down": - return slideInDown; + return reverse ? slideOutDown : slideInDown; case "left": - return slideInLeft; + return reverse ? slideOutLeft : slideInLeft; case "right": - return slideInRight; + return reverse ? slideOutRight : slideInRight; case "up": - return slideInUp; - default: - return slideInLeft; + return reverse ? slideOutUp : slideInUp; } } -const Slide: React.FC = ({ direction, ...rest }) => { - return ; +const Slide: React.FC = ({ + direction, + reverse = false, + ...rest +}) => { + return ; }; export default Slide;