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 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 -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 -Tag verwenden wir , 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