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

Question

Comment réaliser une transition de page avec effet de fondu entre des pages (composants) définies par vue-router ?

Answer 1

Enveloppe <router-view></router-view> con <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 avez 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, assurez-vous d'ajouter le routeur vue de la 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

Le CLI a créé pour vous une application de base, à laquelle vous pouvez ajouter des composants.

1) Créer des composants de page

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

Aller à src/ et créer pages/ répertoire. Ces composants de page-Root (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/ répertoire.

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

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

<script>
export default {
}
</script>

<style scoped>
</style>

2) Configuration du routage

Modifiez le fichier généré src/main.js ajouter 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 / a /page1 . Modifiez le lancement de l'application :

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

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

3) Ajouter une vue du routeur

Le routage est déjà mis en place, il ne manque plus que l'endroit où les composants de la page seront rendus en fonction du routeur. Ceci est fait en plaçant <router-view></router-view> quelque part dans les modèles, vous voudrez le mettre dans le fichier src/App.vue 's <template> étiquette.

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

4) Ajouter un effet de transition en fondu entre les éléments de la page

Enveloppez le <router-view></router-view> avec un <transition name="fade"> élément, 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 commençant par le nom spécifié pendant toute la durée de l'effet, par exemple : .fade-enter-active . Définissez maintenant les effets dans la section 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>

C'est tout. Si vous exécutez l'application maintenant, par exemple avec npm run dev il affichera automatiquement la page 1 avec un effet de fondu enchaîné. Si vous réécrivez l'URL en /page2, il changera les pages avec des effets de fondu-enchaîné et de fondu-enchaîné.

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

5) Facultatif : Ajoutez des liens vers les pages.

Vous pouvez ajouter des liens vers des pages particulières à l'aide de la fonction <router-link> composant, par exemple :

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

Cela donne automatiquement aux liens un router-link-active dans le cas où elles sont actives, 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>

Answer 2

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 - emballez votre router-view avec l'animation globale :

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

Plus d'informations sur GitHub : https://github.com/Orlandster/vue-page-transition