Estoy usando vue 3 con el enrutador vue, y usé el mismo código de los documentos para la transición de la ruta, y funcionó al principio, pero después de algunos cambios en el código en otros archivos, decidió no funcionar ;-;
Aquí está mi aplicación.vue
<template> <Nav /> <router-view v-slot="{ Component }"> <transition name="Fade"> <div> <component :is="Component" /> </div> </transition> </router-view> </template> <script> import Nav from "@/components/Nav.vue"; export default { name: "HomeView", components: { Nav, }, }; </script> <style scoped> .Fade-enter-from, .Fade-leave-to { opacity: 0; transform: translateX(120px); } .Fade-enter-active, .Fade-leave-active { transition: all 0.5s ease-in; } </style>y aquí está la ruta principal
<template> <div> <WText /> <Softwares /> </div> </template> <script> import WText from "@/components/WText.vue"; import Softwares from "@/components/Softwares.vue"; export default { components: { WText, Softwares, }, }; </script>La otra ruta (contacto) es solo un archivo vue vacío, nada especial.
la etiqueta de transición funciona cuando el contenido interno se vuelve a representar (lo que podría significar un cambio de variable de Component , configurando v-if="true" a v-if="false" y viceversa), envolver la etiqueta <component> con div mantendrá un dominio constante elemento existente. Deshacerse de wrapper div (o forzar la representación cuando cambia la variable Component , lo cual no es una buena manera de hacerlo).