add custom transitions

src/main.js

@@ -4,13 +4,13 @@ import "./registerServiceWorker";
 import router from "./router";
 import { createPinia } from "pinia";
 import { MotionPlugin } from "@vueuse/motion";
-
+import useCustomTransitions from "./transitions";
 import "../src/assets/css/global.scss";
 
 const app = createApp(App);
 
 app.use(createPinia());
 app.use(router);
-app.use(MotionPlugin);
+app.use(MotionPlugin, useCustomTransitions);
 
 app.mount("#app");

src/transitions.ts

@@ -0,0 +1,70 @@
+export default {
+  directives: {
+    "slide-from-left": {
+      initial: {
+        opacity: 0,
+        x: 0,
+        y: 20
+      },
+      enter: {
+        opacity: 1,
+        x: 0,
+        y: 0,
+        transition: {
+          duration: 100,
+          ease: "circInOut",
+        },
+      },
+    },
+    "slide-from-left-100": {
+      initial: {
+        opacity: 0,
+        x: -20,
+      },
+      enter: {
+        opacity: 1,
+        x: 0,
+        transition: {
+          delay: 100,
+        },
+      },
+    },
+    "slide-from-top": {
+      initial: {
+        y: -20,
+        opacity: 0,
+      },
+      enter: {
+        y: 0,
+        opacity: 1,
+        transition: {
+          delay: 200,
+        },
+      },
+    },
+    "slide-from-right": {
+      initial: {
+        x: 20,
+        opacity: 0,
+      },
+      enter: {
+        x: 0,
+        opacity: 1,
+        transition: {
+          delay: 200,
+        },
+      },
+    },
+    scale: {
+      initial: {
+        scale: 0.8,
+      },
+      enter: {
+        scale: 1,
+        transition: {
+          duration: 200,
+        },
+      },
+    },
+  },
+};