Cómo crear transiciones de enrutador Vue

En este tutorial, aprenderemos cómo crear transiciones entre rutas en nuestra aplicación Vue.

Vue.js nos proporciona una <transistion> componente envolviendo este componente con <router-view> podemos agregar fácilmente transiciones a las rutas.

Nota: este tutorial asume que ya está familiarizado con las transiciones de Vue. Si no sabe cómo funcionan las transiciones en Vue, consulte Introducción a las transiciones de Vue.js

Vista de la aplicación

<template>
  <div id="app">
    <ul>
      <router-link to="/">Home</router-link>
      <router-link to="/user">User</router-link>
      <router-link to="/contact">Contact us</router-link>
    </ul>
    <transition>      <router-view class="view"/>    </transition>  </div>
</template>

<script>
export default {};
</script>

En el ejemplo anterior, envolvimos nuestro <router-view> componiendo con <transistion> pero todavía no hemos visto ninguna transición porque necesitamos agregar un name atributo con transition nombre de la clase en <transistion> Componiendo.

Índice
  1. Ejemplo de transición de diapositiva
  2. Ejemplo de transición inversa

Ejemplo de transición de diapositiva

Vista de la aplicación

<template>
  <div id="app">
    <ul>
      <router-link to="/">Home</router-link>
      <router-link to="/user">User</router-link>
      <router-link to="/contact">Contact us</router-link>
    </ul>
    <transition name="slide" mode="out-in">      <router-view class="view"/>
    </transition>
  </div>
</template>

<script>
export default {};
</script>

<style>

.slide-enter-active,.slide-leave-active {  transition: transform 0.4s ease-out;}.slide-enter {  transform: translateX(-30%);}.slide-leave-to {  transform: translateX(30%);}</style>

Aquí también hemos añadido mode="out-in" atributo donde out-in significa que el componente anterior se elimina antes de agregar un componente nuevo.

vue-router-slide-transition-example

Ejemplo de transición inversa

Agreguemos un flip efecto de transición a nuestras rutas eliminando slide transición.

Vista de la aplicación

<template>
  <div id="app">
    <ul>
      <router-link to="/">Home</router-link>
      <router-link to="/user">User</router-link>
      <router-link to="/contact">Contact us</router-link>
    </ul>
    <transition name="flip" mode="out-in">      <router-view class="view"/>
    </transition>
  </div>
</template>

<script>
export default {};
</script>

<style>

.flip-enter-active,.flip-leave-active {  transition: transform 0.3s ease-out;}.flip-enter {  transform: rotateY(90deg);}.flip-leave-to {  transform: rotateY(90deg);}</style>

vue-router-flip-transición-ejemplo

Si quieres conocer otros artículos parecidos a Cómo crear transiciones de enrutador Vue puedes visitar la categoría Tutoriales.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas