Merge pull request #4 from Redskullvue/page-transitions-dev

Added Page Transtion On Top Of router-view

Author: Redskullvue

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-transify",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "private": false,
   "type": "module",
   "main": "dist/vue-transify.umd.js",
@@ -38,12 +38,19 @@
   "license": "MIT",
   "description": "Animation library built on top of vue.js Transitiion component for fast and easy to use animations",
   "peerDependencies": {
-    "vue": "^3.5.22"
+    "vue": "^3.5.22",
+    "vue-router": "^4.5.1"
+  },
+  "peerDependenciesMeta": {
+    "vue-router": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.1",
     "prettier": "3.6.2",
     "vite": "^7.1.7",
-    "vite-plugin-vue-devtools": "^8.0.2"
+    "vite-plugin-vue-devtools": "^8.0.2",
+    "vue-router": "^4.5.1"
   }
 }

package.json

@@ -10,9 +10,10 @@
           See Motions
         </button>
       </div>
-
       <small class="main-container--version"
-        >V-1.1.1 | Developed by <a href="https://github.com/Redskullvue">RedskullVue</a>
+        >V-1.2.0 | Developed by
+        <a href="https://github.com/Redskullvue">RedskullVue </a>
+        | Scroll Down To see page transitions
       </small>
     </main>
 
@@ -26,6 +27,10 @@
       </SlideInRight>
     </aside>
   </div>
+  <!-- Where Router-View Is Rendering -->
+  <div class="router-view-container">
+    <PageTransitionHelper mode="out-in" :duration="1000" />
+  </div>
 </template>
 
 <script setup>
@@ -47,6 +52,7 @@ import ZoomUp from '@/components/ZoomUp.vue'
 import ZoomDown from '@/components/ZoomDown.vue'
 import FlipX from '@/components/FlipX.vue'
 import FlipY from '@/components/FlipY.vue'
+import PageTransitionHelper from '@/components/PageTransitionHelper.vue'
 
 const showSideBar = ref(true)
 const currentAnimation = shallowRef(Fade)
@@ -83,6 +89,14 @@ const setAnimation = (name) => {
 </script>
 
 <style>
+.router-view-container {
+  width: 100%;
+  height: 70vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+}
 * {
   padding: 0px;
   margin: 0px;

playground/App.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="container">
+    <h1>Page 1</h1>
+    <h4>{{ route.meta.transition }}</h4>
+    <router-link class="button" to="/test">Change Page</router-link>
+  </div>
+</template>
+<script setup>
+import { useRoute } from 'vue-router'
+const route = useRoute()
+</script>
+<style scoped>
+.container {
+  width: 100%;
+  height: 100%;
+  background-color: lightgreen;
+  display: flex;
+  flex-direction: column;
+}
+.button {
+  padding: 10px 30px;
+  margin-top: 10px;
+  border-radius: 10px;
+  background-color: green;
+  color: white;
+  text-decoration: none;
+}
+</style>

playground/Views/HomeView.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="container">
+    <h1>Page 2</h1>
+    <h4>{{ route.meta.transition }}</h4>
+    <router-link to="/" class="button">Change Page</router-link>
+  </div>
+</template>
+
+<script setup>
+import { useRoute } from 'vue-router'
+const route = useRoute()
+</script>
+
+<style scoped>
+.container {
+  width: 100%;
+  height: 100%;
+  background-color: lightblue;
+  display: flex;
+  flex-direction: column;
+}
+.button {
+  padding: 10px 30px;
+  margin-top: 10px;
+  border-radius: 10px;
+  background-color: green;
+  color: white;
+  text-decoration: none;
+}
+</style>

playground/Views/TestView.vue

@@ -1,5 +1,10 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import '@/styles/animations.css'
+import { router } from './routes'
 
-createApp(App).mount('#app')
+const app = createApp(App)
+
+app.use(router)
+
+app.mount('#app')

playground/main.js

@@ -0,0 +1,47 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import HomeView from '../Views/HomeView.vue'
+import TestView from '../Views/TestView.vue'
+
+export const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    {
+      path: '/',
+      name: 'Home',
+      component: HomeView,
+    },
+    {
+      path: '/test',
+      name: 'TestView',
+      component: TestView,
+    },
+  ],
+})
+
+const availableAnimations = [
+  'fade',
+  'slideInLeft',
+  'slideInRight',
+  'slideInUp',
+  'slideInDown',
+  'bounceIn',
+  'bounceDown',
+  'bounceUp',
+  'rotateIn',
+  'rotateUp',
+  'rotateDown',
+  'zoomIn',
+  'zoomUp',
+  'zoomDown',
+  'flipX',
+  'flipY',
+]
+//Select a random animation from animation list to have random transitions
+router.beforeEach((to, from, next) => {
+  const randomAnimation =
+    availableAnimations[Math.floor(Math.random() * availableAnimations.length)]
+
+  to.meta.transition = randomAnimation
+
+  next()
+})

playground/routes/index.js

@@ -0,0 +1,19 @@
+<template>
+  <RouterView v-slot="{ Component, route }" v-bind="$attrs">
+    <Transition
+      :name="route.meta.transition || 'fade'"
+      :mode="mode"
+      :style="{
+        '--animation-duration': duration + 'ms',
+      }"
+    >
+      <component :is="Component" :key="route.path" />
+    </Transition>
+  </RouterView>
+</template>
+<script setup>
+const props = defineProps({
+  mode: { type: String, default: 'out-in' },
+  duration: { type: Number, default: 500 },
+})
+</script>

src/components/PageTransitionHelper.vue

@@ -16,6 +16,7 @@ import ZoomUp from './components/ZoomUp.vue'
 import ZoomIn from './components/ZoomIn.vue'
 import FlipX from './components/FlipX.vue'
 import FlipY from './components/FlipY.vue'
+import PageTransitionHelper from './components/PageTransitionHelper.vue'
 
 export {
   Fade,
@@ -34,4 +35,5 @@ export {
   ZoomIn,
   FlipX,
   FlipY,
+  PageTransitionHelper,
 }