wake-up-neo.com

Vue.js Überblendungseffekt mit vue-router

Wie kann ein Seitenübergang mit Überblendungseffekt zwischen vom Vue-Router definierten Seiten (Komponenten) erzielt werden?

40
Kaspi

Wickle <router-view></router-view> Mit <transition name="fade"></transition> Um und füge diese Stile hinzu:

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

Detaillierte Antwort

Angenommen, Sie haben Ihre Anwendung mit vue-cli erstellt, z.

vue init webpack fadetransition
cd fadetransition
npm install

Installieren Sie den Router:

npm i vue-router

Wenn Sie Ihre App nicht mit vue-cli entwickeln, müssen Sie den vue= Router wie folgt hinzufügen:

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

Sie können beispielsweise Folgendes verwenden: https://unpkg.com/vue-router/dist/vue-router.js

Die CLI hat eine Backbone-Anwendung für Sie erstellt, zu der Sie Komponenten hinzufügen können.

1) Seitenkomponenten erstellen

In Vue können Komponenten (Benutzeroberflächenelemente) verschachtelt werden. Eine Seite in Ihrer App kann mit einer regulären Vue - Komponente erstellt werden, die als Stammverzeichnis für andere Komponenten auf dieser Seite gilt.

Gehen Sie zu src/ Und erstellen Sie das Verzeichnis pages/. Diese Seitenstammkomponenten (einzelne Seiten) werden in dieses Verzeichnis gestellt, während die anderen Komponenten, die auf den tatsächlichen Seiten verwendet werden, in das vorgefertigte Verzeichnis components/ Gestellt werden können.

Erstellen Sie zunächst zwei Seiten in Dateien mit den Namen src/pages/Page1.vue Und src/pages/Page2.vue. Ihr Inhalt ist (jeweils Seitenzahlen bearbeiten):

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

<script>
export default {
}
</script>

<style scoped>
</style>

2) Einrichtungsrouting

Bearbeiten Sie den generierten src/main.js Und fügen Sie die erforderlichen Importe hinzu:

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

Hinzufügen einer globalen Routernutzung:

Vue.use(VueRouter)

Hinzufügen eines Router-Setups:

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

Die letzte Route leitet nur den ursprünglichen Pfad / Zu /page1 Um. Bearbeiten Sie die App-Initiierung:

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

Das ganze Beispiel src/main.js Ist am Ende der Antwort.

3) Hinzufügen einer Routeransicht

Das Routing ist mittlerweile eingerichtet, es fehlt lediglich eine Stelle, an der die Seitenkomponenten entsprechend dem Router gerendert werden. Platzieren Sie dazu <router-view></router-view> In den Vorlagen und fügen Sie es in das src/App.vue - Tag des <template> Ein.

Das ganze Beispiel src/App.vue Ist am Ende der Antwort.

4) Überblendungseffekt zwischen Seitenkomponenten hinzufügen

Binden Sie das Element <router-view></router-view> In ein Element <transition name="fade"> Ein, z.

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

Vue erledigt die Aufgabe hier: Es werden geeignete CSS-Klassen erstellt und eingefügt, beginnend mit dem Namen, der während der gesamten Dauer des Effekts angegeben wurde, z. B .: .fade-enter-active. Definieren Sie nun die Effekte im Abschnitt von 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>

Das ist es. Wenn Sie die App jetzt ausführen, z. Mit npm run dev wird automatisch Seite 1 mit einem Einblendeffekt angezeigt. Wenn Sie die URL in/page2 umschreiben, werden die Seiten mit Ausblend- und Einblendeffekten umgeschaltet.

Weitere Informationen finden Sie in der Dokumentation zu Routing und Übergänge .

5) Optional: Fügen Sie Links zu Seiten hinzu.

Mit der Komponente <router-link> Können Sie Links zu bestimmten Seiten hinzufügen, z.

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

Dadurch erhalten die Links automatisch eine Klasse router-link-active, Falls sie aktiv sind. Sie können jedoch auch benutzerdefinierte Klassen angeben, wenn Sie z. 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>

Dateien als Referenz

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

Plug-and-Play-Lösung

Es gibt auch eine Plug-and-Play-Lösung namens vue-page-transition was Ihnen alle Arten von transitions anbietet. (Überblenden, Umblättern, Zoomen, Überlagern usw.)

1 - Installiere das npm-Paket:

yarn add vue-page-transition

2 - registriere das Plugin:

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

Vue.use(VuePageTransition)

3 - wickeln Sie Ihre router-view mit der globalen Animation:

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

Weitere Informationen zu GitHub: https://github.com/Orlandster/vue-page-transition

0
Orlandster