Wie implementiert man Vorwärts- und Rückwärts-Routing-Umschaltanimationseffekte in einem Vue-Projekt?

Wie implementiert man Vorwärts- und Rückwärts-Routing-Umschaltanimationseffekte in einem Vue-Projekt?

In Vue-Projekten verwenden wir häufig Vue Router, um das Routing zu verwalten. Wenn wir die Route wechseln, wird der Seitenwechsel sofort und ohne Übergangseffekte abgeschlossen. Wenn wir dem Seitenwechsel einige Animationseffekte hinzufügen möchten, können wir das Übergangssystem von Vue verwenden.

Vues Übergangssystem bietet eine einfache Möglichkeit, Übergangseffekte hinzuzufügen, wenn Elemente eingefügt oder entfernt werden. Mit dieser Funktion können wir die Vorwärts- und Rückwärts-Routing-Umschaltung animieren.

Zunächst müssen wir die Übergangskomponente 300ff3b250bc578ac201dd5fb34a0004 von Vue einführen. Es kann in der Stammkomponente oder in der Komponente eingeführt werden, in der die Animation hinzugefügt werden muss.

Als nächstes müssen wir den Stil der Übergangsanimation im 300ff3b250bc578ac201dd5fb34a0004-Tag definieren. Die Übergangskomponente von Vue verfügt über die folgenden zu verwendenden CSS-Klassennamen:

• enter: der Startzustand beim Einfügen, wird unmittelbar vor dem Einfügen der Animation angewendet
• enter-active: der Beendigungszustand beim Einfügen, wird beim Einfügen der Animation ausgelöst Wird nach einem Frame angewendet, bis die Einfügeanimation abgeschlossen ist.
• leave: Der Startzustand beim Löschen wird unmittelbar vor der Löschanimation angewendet.
• leave-active: Der Endzustand beim Löschen wird ein Frame nach der Löschanimation angewendet ausgelöst, bis die Löschanimation abgeschlossen ist

Hier ist ein Codebeispiel für einen Beispielanimationseffekt:

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

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

Im obigen Code verwenden wir einen Übergangseffekt namens „fade“ und verwenden den „out-in“-Modus. Das bedeutet, dass Sie beim Routenwechsel zunächst die alte Seite verlassen und dann die neue Seite aufrufen.

Im 300ff3b250bc578ac201dd5fb34a0004-Tag verwenden wir 975b587bf85a482ea10b0a28848e78a4, um die Komponenten anzuzeigen, die der aktuellen Route entsprechen. Beim Ein- und Ausstieg werden entsprechende CSS-Klassennamen hinzugefügt.

Als nächstes definieren wir den Stil der Übergangsanimation über das Tag c9ccee2e6ea535a969eb3f532ad9fe89 Beim Einfügen und Löschen wurde ein Transparenzübergangseffekt von 0 auf 1 hinzugefügt.

Abschließend packen wir das 300ff3b250bc578ac201dd5fb34a0004-Tag in die Komponente ein, die animiert werden muss, oder in die Stammkomponente.

Wenn wir mit dem obigen Code die Routen im Vue-Projekt wechseln, hat die Seite einen Ein- und Ausblendeffekt.

Zusätzlich zu den Ein- und Ausblendeffekten können wir je nach Bedarf auch verschiedene Übergangseffekte implementieren, wie z. B. Schiebeeffekte, Zoomeffekte usw. Informationen zu bestimmten Vorgängen finden Sie in der offiziellen Vue-Dokumentation.

Zusammenfassend lauten die Schritte zum Implementieren der Vorwärts- und Rückwärts-Routing-Switching-Animationseffekte im Vue-Projekt wie folgt:

1. Einführen der Übergangskomponente 300ff3b250bc578ac201dd5fb34a0004 von Vue.
2. Definieren Sie den Stil der Übergangsanimation im 300ff3b250bc578ac201dd5fb34a0004-Tag.
3. Verwenden Sie 975b587bf85a482ea10b0a28848e78a4, um die Komponenten anzuzeigen, die der aktuellen Route entsprechen.
4. Fügen Sie je nach Bedarf verschiedene Übergangseffekte hinzu.

Das obige ist der detaillierte Inhalt vonWie implementiert man Vorwärts- und Rückwärts-Routing-Umschaltanimationseffekte in einem Vue-Projekt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!