feat(anims): added reversed Slide animation

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";

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;

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;

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;

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;

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<RevealProps, "animation"> {
+interface SlideProps extends Omit<RevealProps, "animation"> {
   /**
    * 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<ZoomProps> = ({ direction, ...rest }) => {
-  return <Reveal animation={getSlideKeyframes(direction)} {...rest} />;
+const Slide: React.FC<SlideProps> = ({
+  direction,
+  reverse = false,
+  ...rest
+}) => {
+  return <Reveal animation={getSlideKeyframes(reverse, direction)} {...rest} />;
 };
 
 export default Slide;