Transition vue router - vue.js

Question

I want a transition in my VueJS 3 project between 2 pages. I have a button and when I click on it, it goes on a new page with a dynamic URL. I would like a transition here. I don't have any errors but there is no transition when I change the page. I don't know why. It's true that initially I didn't had a <router-view/> tag, I had to add it to make the transition, maybe it doesn't use the router-view when it is changing the page so doesn't see the transition.
Here my code :
<template>
<div class="p-grid">
(...)
<div class="p-col" v-if="infoItem.length === 0">
</div>
<div v-else>
<router-link
:to=" {
name:
'Detail',
params: {
id: infoItem.name,
subcategory: infoItem.subcategory,
name: infoItem.name,
},
}">
<Button icon="pi pi-search-plus"></Button>
</router-link>
<router-view v-slot="{ Component }">
<transition name="route" mode="out-in">
<component :is="Component"></component>
</transition>
</router-view>
</div>
</template>
<script>
(
...)
</script>
<style>
.p-grid {
margin: 0.5rem;
font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
}
/* Route transition */
.route-enter-from {
opacity: 0;
transform: translateX(100px);
}
.route-enter-active {
transition: ass 0.3s ease-out;
}
.route-leave-to {
opacity: 0;
transform: translateX(-100px);
}
.route-leave-active {
transition: ass 0.3s ease-in;
}
</style>
Do you any idea why ?
Thanks a lot