Router link with transition wont work second time: - vue-router

Question

routes.js
const routes = [
{
path: "/",
component: Home,
meta: {
title: 'Home'
}
},
{
path : "/register",
component: Register,
meta: {
title: 'Register'
}
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
App.vue
<template>
<router-link to="home">Home</router-link>
<router-link to="register">Register</router-link>
<router-view v-slot="{ Component }">
<transition name='fade' mode="out-in">
<component :is="Component"></component>
</transition>
</router-view>
</template>
When I visit /home and click on the Register - it works. But once I try to go back to Home, it's clearly loading the component but it's blank white.
From then on switching between routes obviously switches components, but everything stays blank white until I refresh on any page - then it shows it.
When I remove the Transition from the router-view it starts working.
With the transition the only switch that is working is going from Home to Register. Then any switches just turn the page blank white.
I've tried with $router.push, router-link, $router.back() - all same result.
EDIT: I found out that not only removing the whole transition fixes it, but also changing from out-in to in-out. It doesn't look good with my design, but it shows the components fine.

Answer 1

I tried the code you pasted, it works well...
Have you added any styles to make it work, if not please add the styles, i add styles like below:
<style scoped lang="scss">
.fade-enter-active,
.fade-leave-active {
transition: opacity 1s ease;
}
.fade-enter-from,
.fade-leave-active {
opacity: 0;
}
</style>