web-dev-qa-db-fra.com

Effet de fondu de transition de page avec vue.js avec vue-router

Comment réaliser une transition de page à effet de fondu entre les pages définies par vue-router?

transitionfadeeffectvue-routervue.js
40
Kaspi

Enveloppez <router-view></router-view> Avec <transition name="fade"></transition> Et ajoutez ces styles:

.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
}

Réponse détaillée

En supposant que vous ayez créé votre application avec vue-cli, par exemple:

vue init webpack fadetransition
cd fadetransition
npm install

Installez le routeur:

npm i vue-router

Si vous ne développez pas votre application à l'aide de vue-cli, veillez à ajouter le routeur vue de manière standard):

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

Vous pouvez utiliser par exemple: https://unpkg.com/vue-router/dist/vue-router.js

La CLI a créé une application dorsale à laquelle vous pouvez ajouter des composants.

1) Créer des composants de page

Dans Vue, les composants (éléments d'interface utilisateur) peuvent être imbriqués. Une page de votre application peut être créée avec un composant Vue normal, considéré comme racine des autres composants de cette page.

Allez à src/ Et créez le répertoire pages/. Ces composants racine de la page (pages individuelles) seront placés dans ce répertoire, tandis que les autres composants utilisés dans les pages réelles peuvent être placés dans le répertoire prêt à l'emploi components/.

Créez deux pages dans des fichiers appelés src/pages/Page1.vue Et src/pages/Page2.vue Pour commencer. Leur contenu sera (éditez les numéros de page respectivement):

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

<script>
export default {
}
</script>

<style scoped>
</style>

2) Configuration du routage

Editez le src/main.js Généré ajoutez les importations requises:

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

Ajouter une utilisation globale du routeur:

Vue.use(VueRouter)

Ajouter une configuration de routeur:

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

La dernière route redirige simplement le chemin initial / Vers /page1. Éditez l'initiation de l'application:

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

L'exemple entier src/main.js Se trouve à la fin de la réponse.

3) Ajoutez une vue de routeur

Le routage est configuré à présent, seul un emplacement où les composants de la page seront rendus en fonction du routeur est manquant. Ceci est fait en plaçant <router-view></router-view> Quelque part dans les modèles, vous voudrez le mettre dans la balise src/App.vue De <template>.

L'exemple entier src/App.vue Se trouve à la fin de la réponse.

4) Ajouter un effet de transition en fondu entre les composants de la page

Enveloppez le <router-view></router-view> Avec un élément <transition name="fade">, Par exemple:

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

Vue fera le travail ici: il créera et insérera les classes CSS appropriées en commençant par le nom spécifié dans la durée de l'effet, par exemple: .fade-enter-active. Définissez maintenant les effets dans la section 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>

C'est ça. Si vous exécutez l'application maintenant, par exemple avec npm run dev, il affichera automatiquement la page 1 avec un effet de fondu. Si vous réécrivez l'URL dans/page2, les pages avec effets de fondu en sortie et en fondu seront basculées.

Consultez la documentation sur routage et transitions pour plus d'informations.

5) Facultatif: ajoutez des liens vers des pages.

Vous pouvez ajouter des liens vers des pages particulières avec le composant <router-link>, Par exemple:

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

Cela donne automatiquement aux liens une classe router-link-active Au cas où ils seraient actifs, mais vous pouvez également spécifier des classes personnalisées si vous utilisez par exemple. 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>

Fichiers de référence

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>
145
Kaspi

Solution Plug and Play

Il existe également une solution plug and play appelée vue-page-transition qui vous offre toutes sortes de transitions. (fondu, retournement, zoom, superposition, etc.)

1 - Installez le paquet npm: 

yarn add vue-page-transition

2 - enregistrez le plugin: 

import Vue from 'vue'
import VuePageTransition from 'vue-page-transition'

Vue.use(VuePageTransition)

3 - Enveloppez votre router-view avec l'animation globale: 

<vue-page-transition name="fade-in-right">
  <router-view/>
</vue-page-transition>

En savoir plus sur GitHub: https://github.com/Orlandster/vue-page-transition

0
Orlandster