Transiciones y animaciones de rutas
RouterView con Transition, nombre de transición según la ruta y desplazamiento/desvanecimiento entre rutas
Transiciones y animaciones de rutas es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.
Animar entre rutas
Cuando cambia la URL, el componente coincidente se sustituye al instante. Al envolver la vista en Transition de Vue, puede aplicar un fundido o un deslizamiento entre páginas para lograr una experiencia más fluida.
RouterView con v-slot
Para animar, necesita acceder al componente resuelto. La forma de slot con ámbito de RouterView expone Component y route.
<RouterView v-slot="{ Component }">
<component :is="Component" />
</RouterView>Envolver con Transition
Coloque un Transition alrededor del component dinámico. Vue aplica clases de entrada y salida cuando el componente de la ruta se monta y se desmonta.
<RouterView v-slot="{ Component }">
<Transition name="fade" mode="out-in">
<component :is="Component" />
</Transition>
</RouterView>¿Por qué mode out-in?
Sin mode, las páginas antigua y nueva se animan al mismo tiempo y se superponen. mode="out-in" espera a que la página antigua salga antes de que entre la nueva.
Definir el CSS
name se convierte en el prefijo de una clase CSS. Defina las transiciones de entrada y salida para crear un fundido.
<style>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
</style>Transición por ruta mediante meta
Guarde un nombre de transición en el meta de la ruta para que las distintas rutas se animen de forma diferente: un deslizamiento para una sección y un fundido para otra.
{ path: '/about', component: About, meta: { transition: 'slide' } }Calcular el nombre de la transición
Lea route.meta.transition desde el slot y asígnelo al nombre de Transition, usando un valor predeterminado como alternativa.
<RouterView v-slot="{ Component, route }">
<Transition :name="route.meta.transition || 'fade'" mode="out-in">
<component :is="Component" />
</Transition>
</RouterView>Deslizamientos direccionales
Puede elegir la transición dinámicamente según la dirección de navegación: por ejemplo, deslizar hacia la izquierda al avanzar y hacia la derecha al retroceder, comparando la profundidad de las rutas en un guardia.
Deslizamiento de entrada y salida
Un deslizamiento combina opacidad y transformación. Haga que la página entrante aparezca desde la derecha y que la saliente se desplace hacia la izquierda.
<style>
.slide-enter-active,
.slide-leave-active {
transition: all 0.3s ease;
}
.slide-enter-from { transform: translateX(30px); opacity: 0; }
.slide-leave-to { transform: translateX(-30px); opacity: 0; }
</style>Usar una key para cambios de parámetros
Si dos rutas comparten el mismo componente, como /user/1 y /user/2, Vue lo reutiliza y omite la transición. Añada una :key a la ruta para forzar la renderización y la animación de nuevo.
<component :is="Component" :key="route.path" />Respetar el movimiento reducido
Por motivos de accesibilidad, desactive las animaciones cuando el usuario prefiera reducir el movimiento mediante una consulta de medios CSS.
<style>
@media (prefers-reduced-motion: reduce) {
.fade-enter-active, .fade-leave-active { transition: none; }
}
</style>Comprobación rápida
Ponga a prueba sus conocimientos sobre las transiciones de rutas.
Resumen
Ha aprendido a animar las rutas:
- Use RouterView con v-slot para obtener Component y route.
- Envuelva component :is con Transition y use mode="out-in".
- Defina el CSS de entrada y salida según el nombre de la transición.
- Lea route.meta.transition para aplicar animaciones específicas por ruta; añada :key para los componentes compartidos.
Preguntas frecuentes
¿La lección «Transiciones y animaciones de rutas» es gratis?
Sí — el texto completo de «Transiciones y animaciones de rutas» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Transiciones y animaciones de rutas»?
RouterView con Transition, nombre de transición según la ruta y desplazamiento/desvanecimiento entre rutas Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Vue Academy?
No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Transiciones y animaciones de rutas»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Vue Academy?
Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Campos meta de rutas y tipado
- Transiciones y animaciones de rutas
- Configuración del comportamiento de desplazamiento
- Navegación programática y useRouter