I'm relatively new to vue.js and have been trying to get my routed pages to fade in and out when the user switches to a new page. I thought it would be fairly simple with vue, but I have been tearing my hair out over this. All the resources I found suggested it would be easiest to implement this in the following way, like I have:
App.vue:
...
<template>
<head>
...
</head>
<header>
<nav>
<RouterLink to="/">Home</RouterLink>
<RouterLink to="/committees">Committees</RouterLink>
</nav>
</header>
<Transition name="fade" mode="out-in"><RouterView/></Transition>
</template>
<style>
.fade-enter-active,
.fade-leave-active {
transition: opacity .5s ease-in-out;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
...
</style>
This works for fading into the new component, but the old component doesn't fade out. The page just goes blank immediately, then the new component fades in. I have tried every variation of the css and html, and nothing has worked. Does RouterView never actually fade out because the components just switch, so .fade-leave-to is never triggered? If this is the case, how could I achieve my end goal of fading out? If not, uh... pretty please help!
The manual is your friend:
In order to use transitions on your route components and animate navigations, you need to use the v-slot API:
<router-view v-slot="{ Component }">
<transition name="fade">
<component :is="Component" />
</transition>
</router-view>