So führen Sie einen Übergang in Vue durch

Die Implementierung von Seitensprüngen in Vue ist eine der häufigsten Anforderungen in der Frontend-Entwicklung. Es ist auch eine gute Wahl, Übergangseffekte während Seitensprüngen zu implementieren, um das Benutzererlebnis zu verbessern.

Vue bietet verschiedene Möglichkeiten, Seitenübergangseffekte zu erzielen, und wir werden sie im Folgenden einzeln vorstellen.

1. Vue-Animation

Vue-Animation ist eine offiziell von Vue bereitgestellte API, die zum Implementieren von Übergangseffekten in Vue-Komponenten verwendet wird. Die Vue-Animation muss über den Übergangsmechanismus von Vue implementiert werden. Die Hook-Funktion des Übergangsmechanismus bietet verschiedene Methoden zur Steuerung des Übergangseffekts, z (entering) ): Der Zustand, wenn das Element eingefügt wird (startState)

after-enter (after enter): Der Zustand, nachdem der Elementeinfügevorgang abgeschlossen ist (endState)
• enter-cancelled (enter-cancelled): Wenn der Wird der Eintrag abgebrochen, wird dieser Hook aufgerufen.
• Das Folgende ist ein Beispielcode, der Vue-Animationen verwendet, um Übergangseffekte zu erzielen:

<transition name="fade">
  <router-view></router-view>
</transition>

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}

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

In diesem Beispiel wird eine Animation mit einem Namen gleich „fade“ an eine Router-Ansicht gebunden, um den Übergangseffekt anzuzeigen , wenn die neue Seite aufgerufen wird, entsteht ein Verlaufseffekt, und die Deckkraft erhöht sich im Laufe der Zeit allmählich von 0 auf 1. Ebenso tritt beim Verlassen der alten Seite ein Verlaufseffekt auf, und die Deckkraft ändert sich allmählich von 1 auf 0 nach einer gewissen Zeit.

Implementierung von Bibliotheken von Drittanbietern

Vue-Übergangseffekte können auch über Bibliotheken von Drittanbietern implementiert werden. Die beliebtesten davon sind die folgenden:

2. Übergangsgruppe: Wird für jede miteinander zu verbindende Komponente verwendet. Situation

vue-router-transition: wird für Seitenwechselszenen verwendet

animated-vue: wird für Übergangseffekte in einer Vielzahl anderer Szenen verwendet
• transition-group
• transition-group kann problemlos Listen und Raster usw. implementieren. Animierte Übergangseffekte zwischen Komponenten.

<transition-group name="list" tag="p">
  <span v-for="item in items" :key="item" class="list-item">{{ item }}</span>
</transition-group>

In diesem Beispiel wird ein Span-Element in einer Schleife durchlaufen und zur Übergangsgruppe hinzugefügt. Jedes Element verfügt über einen Schlüsselattributsatz. Sie haben alle das gleiche Klassennamen-Listenelement. Die Übergangsgruppe fügt diese Elemente dynamisch hinzu und entfernt sie, um Übergangseffekte zu erzielen.

vue-router-transition

vue-router-transition wird verwendet, um Seitenübergangseffekte in Vue Router zu implementieren. Um vue-router-transition zu verwenden, müssen Sie lediglich die Klassennamen v-enter und v-leave zur Routing-Komponente von Vue Router hinzufügen. Wir können CSS verwenden, um diese Stile zu definieren und Übergangseffekte zu erzielen.

<transition name="fade" mode="out-in">
  <router-view></router-view>
</transition>

// fade 动画实现方式同上

Wenn in diesem Beispiel zwei Seiten wechseln, wird die neue Seite zuerst ausgeblendet und über der alten Seite platziert. Anschließend wird mithilfe der CSS-Animation der Übergangseffekt beim Betreten und Verlassen erzielt.

animated-vue

animated-vue ist eine weitere Bibliothek zur Implementierung von Vue-Übergangseffekten. Sie bietet mehrere Arten von Animationen (Einstieg, Ausstieg, Popup-Boxen usw.), um unsere Seitenübergänge reichhaltiger zu gestalten.

<transition appear :css="false"
  v-bind:enter-active-class="'animated fadeIn'"
  v-bind:leave-active-class="'animated fadeOut'"
  >
  <router-view></router-view>
</transition>

In diesem Beispiel verwenden wir eine CSS-Bibliothek namens „animated“, die mehrere verschiedene CSS-Animationen bereitstellt. Wir können diese Bibliothek mit dem Übergangsmechanismus von Vue verwenden, um interessante Seitenübergangseffekte zu erzielen.

Zusammenfassung

Die Implementierung von Übergangseffekten in Vue kann den Benutzern nicht nur ein besseres Erlebnis bieten, sondern auch die Interaktivität und Ästhetik der Seite verbessern. Vue bietet eine Vielzahl integrierter APIs und Bibliotheken von Drittanbietern, um Übergangseffekte zu erzielen, und wir können je nach Bedarf und Szenario eine Auswahl treffen.

Das obige ist der detaillierte Inhalt vonSo führen Sie einen Übergang in Vue durch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!