Vue.js de la page effet de fondu de transition avec vue-routeur

Wrap <router-view></router-view><transition name="fade"></transition> et ajouter 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

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 en utilisant vue-cli, assurez-vous d'ajouter le routeur de 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éé une application de base pour vous, à laquelle vous pouvez ajouter des composants.

1) Créer des composants de la page

En Vue, les composants (éléments de l'INTERFACE utilisateur) peuvent être imbriqués. Une page dans votre application peut être faite avec un composant Evi régulier qui est considéré comme la racine d'autres composants dans cette page.

src/ et de créer pages/ répertoire. Ils page-composants de racine (pages) sera mis dans ce répertoire, tandis que les autres composants utilisés dans les pages peuvent être mis à la prêt-à -components/ répertoire.

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

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

<script>
export default {
}
</script>

<style scoped>
</style>

2) routage de configuration

éditer lesrc/main.js ajouter l'importation:

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

Ajouter un global routeur d'utilisation:

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 //page1. Modifier l'initiation de l'application:

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

le tout src/main.js exemple est à la fin de la réponse.

3) Ajouter une vue de routeur

le routage est maintenant mis en place, juste un endroit où les composants de la page seront rendus selon le routeur est manquant. Ceci est fait en plaçant <router-view></router-view> quelque part dans les modèles, vous voulez le mettre dans le src/App.vue<template> balise.

le tout src/App.vue exemple est à la fin de la réponse.

4) Ajouter fade effet de transition entre les composants de la page

envelopper 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 en commençant par le nom spécifié par l'effet. durée, par exemple: .fade-enter-active. Maintenant, définissez les effets dans App.section de 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 lancez l'application maintenant, par exemple avec npm run dev, il affichera automatiquement la Page 1 avec un effet fade-in. Si vous réécrivez L'URL vers /pagee2, cela changera les pages avec les effets fade-out et fade-in.

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

5) facultatif: ajouter des liens pour les pages.

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

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

Cela donne automatiquement les liens router-link-active class dans le cas où ils sont 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 pour 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>