As I navigate my way through learning about vue.js, one issue that has been puzzling me is how to make routed pages fade in and out when a user switches to a new page. Despite thinking it would be a simple task with vue, I have been struggling quite a bit with it. The resources I've come across all suggest implementing it in the way shown below:
In my App.vue file:
...
<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>
While this method successfully fades into the new component, I'm having trouble making the old component fade out. Instead of fading out, the page just goes blank immediately before the new component fades in. I've experimented with various CSS and HTML combinations but haven't found a solution yet. Could it be that RouterView never actually fades out because the components simply switch, thereby not triggering .fade-leave-to? If so, how can I achieve my goal of having both components fade in and out seamlessly? Any help would be greatly appreciated!