transition - framework - Vue.js página transición efecto de desvanecimiento con vue-router

vue transition component

Question

¿Cómo lograr una transición de página de efecto de fundido entre las páginas (componentes) definidas por vue-router?

Answer 1

Envuelva <router-view></router-view> con <transition name="fade"></transition> y agregue estos estilos:

.fade-enter-active, .fade-leave-active {
  transition-property: opacity;
  transition-duration: .25s;
}

.fade-enter-active {
  transition-delay: .25s;
}

.fade-enter, .fade-leave-active {
  opacity: 0
}

Respuesta detallada

Suponiendo que ha creado su aplicación con vue-cli, por ejemplo:

vue init webpack fadetransition
cd fadetransition
npm install

Instale el enrutador:

npm i vue-router

Si no está desarrollando su aplicación usando vue-cli, asegúrese de agregar el enrutador vue de manera estándar:

<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>

Puede utilizar, por ejemplo: https://unpkg.com/vue-router/dist/vue-router.js

La CLI ha creado una aplicación troncal para usted, a la que puede agregar componentes.

1) Crear componentes de página

En Vue, los componentes (elementos UI) pueden estar anidados. Se puede crear una página en su aplicación con un componente Vue normal que se considera como la raíz de otros componentes en esa página.

Vaya a src/ y cree pages/ directory. Estos componentes de raíz de página (páginas individuales) se colocarán en este directorio, mientras que los otros componentes utilizados en las páginas reales se pueden colocar en el directorio components/ listos para usar.

Cree dos páginas en los archivos llamados src/pages/Page1.vue y src/pages/Page2.vue para empezar. Su contenido será (editar números de página respectivamente):

<template>
  <h1>Page 1</h1>
</template>

<script>
export default {
}
</script>

<style scoped>
</style>

2) Configuración de enrutamiento

Edite el src/main.js generado src/main.js agregue las importaciones requeridas:

import VueRouter from ''vue-router''
import Page1 from ''./pages/Page1''
import Page2 from ''./pages/Page2''

Agregue un uso de enrutador global:

Vue.use(VueRouter)

Agregar una configuración de enrutador:

const router = new VueRouter({
  routes: [
    { path: ''/page1'', component: Page1 },
    { path: ''/page2'', component: Page2 },
    { path: ''/'', redirect: ''/page1'' }
  ]
})

La última ruta simplemente redirige la ruta inicial / a /page1 . Editar la iniciación de la aplicación:

new Vue({
  router,
  el: ''#app'',
  render: h => h(App)
})

El ejemplo completo de src/main.js encuentra al final de la respuesta.

3) Añadir una vista de enrutador

El enrutamiento ya está configurado, solo falta un lugar donde los componentes de la página se procesarán de acuerdo con el enrutador. Esto se hace colocando <router-view></router-view> en algún lugar de las plantillas, querrá ponerlo en la etiqueta <template> src/App.vue .

El ejemplo completo de src/App.vue está al final de la respuesta.

4) Añadir efecto de transición de fundido entre los componentes de la página

Envuelva la <router-view></router-view> con un elemento <transition name="fade"> , por ejemplo:

<template>
  <div id="app">
    <transition name="fade">
      <router-view></router-view>
    </transition>
  </div>
</template>

Vue hará el trabajo aquí: creará e insertará las clases de CSS apropiadas comenzando con el nombre especificado a lo largo de la duración del efecto, por ejemplo: .fade-enter-active . Ahora define los efectos en la sección de App.vue:

<style>
.fade-enter-active, .fade-leave-active {
  transition-property: opacity;
  transition-duration: .25s;
}

.fade-enter-active {
  transition-delay: .25s;
}

.fade-enter, .fade-leave-active {
  opacity: 0
}
</style>

Eso es. Si ejecuta la aplicación ahora, por ejemplo, con npm run dev , se mostrará automáticamente la página 1 con un efecto de npm run dev . Si reescribe la URL a / page2, cambiará las páginas con efectos de atenuación y desaparición gradual.

Consulte la documentación sobre routing y transitions para obtener más información.

5) Opcional: Añadir enlaces a las páginas.

Puede agregar enlaces a páginas particulares con el componente <router-link> , por ejemplo:

<router-link to="/page1">Page 1</router-link>
<router-link to="/page2">Page 2</router-link>

Esto automáticamente da a los enlaces una clase de router-link-active en caso de que estén activos, pero también puede especificar clases personalizadas si está utilizando, por ejemplo, Bootstrap:

<router-link class="nav-link" active-class="active" to="/page1">Page 1</router-link>
<router-link class="nav-link" active-class="active" to="/page2">Page 2</router-link>

Archivos para referencia

src / main.js:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from ''vue''
import VueRouter from ''vue-router''

import App from ''./App''
import Page1 from ''./pages/Page1''
import Page2 from ''./pages/Page2''

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: ''/page1'', component: Page1 },
    { path: ''/page2'', component: Page2 },
    { path: ''/'', redirect: ''/page1'' }
  ]
})

/* eslint-disable no-new */
new Vue({
  router,
  el: ''#app'',
  render: h => h(App)
})

src / App.vue:

<template>
  <div id="app">
    <router-link class="nav-link" active-class="active" to="/page1">Page 1</router-link>
    <router-link class="nav-link" active-class="active" to="/page2">Page 2</router-link>
    <transition name="fade">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
export default {
  name: ''app''
}
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition-property: opacity;
  transition-duration: .25s;
}

.fade-enter-active {
  transition-delay: .25s;
}

.fade-enter, .fade-leave-active {
  opacity: 0
}
</style>

src / pages / Page1.vue:

<template>
  <h1>Page 1</h1>
</template>

<script>
export default {
}
</script>

<style scoped>
</style>

src / pages / Page2.vue:

<template>
  <h1>Page 2</h1>
</template>

<script>
export default {
}
</script>

<style scoped>
</style>