As I dive into the world of VueJs (3), I've implemented a transition effect on my routes to give my pages a smooth appearance. Everything seems to be working well, but there's one issue - when I refresh the page (F5) or on first load, the transition plays for the current page, creating a less-than-ideal visual effect.
My original intention was to create a carousel-like navigation for my pages.
This is how I've integrated it into my App.vue:
<script setup>
import {RouterView} from 'vue-router'
import Header from "@/components/Header.vue";
</script>
<template>
<div class="absolute container min-w-full h-screen bg-blue-500 overflow-hidden">
<Header/>
<RouterView v-slot="{ Component, route }">
<Transition :leave-active-class="route.meta.leaveClass" :enter-active-class="route.meta.enterClass">
<component :is="Component"/>
</Transition>
</RouterView>
</div>
</template>
And here's what my routes configuration looks like:
routes: [
{
path: '/',
name: 'home',
component: HomeView,
meta: {
leaveClass: "animate__animated animate__slideOutUp",
enterClass: "animate__animated animate__slideOutUp"
}
},
{
path: "/about",
name: 'about',
component: () => import('../views/AboutView.vue'),
meta: {
leaveClass: "animate__animated animate__slideOutUp",
enterClass: "animate__animated animate__slideOutUp"
}
}