4 Möglichkeiten zur Implementierung von Routing-Übergangseffekten in Vue

Vue-Router-Übergänge sind eine schnelle und einfache Möglichkeit, Vue-Programmen personalisierte Effekte hinzuzufügen. Es ermöglicht Ihnen, flüssige Animationen und Übergänge zwischen verschiedenen Seiten Ihrer Anwendung hinzuzufügen. Bei richtiger Verwendung kann es Ihrem Programm ein professionelleres Erscheinungsbild verleihen und das Benutzererlebnis verbessern.

In diesem Artikel werde ich zunächst die Grundlagen der Verwendung von Vue-Router-Übergängen vorstellen und Ihnen dann einige Beispiele zur Inspiration geben. Hier ist ein Beispiel:

Hinzufügen von Routen zu einer Vue-Anwendung

Ein typisches Vue-Router-Setup sieht folgendermaßen aus:

<Vorlage>
  <Router-Ansicht />
</Vorlage>

In älteren Versionen von Vue Router konnten wir die <router-view> einfach mit einer <transition>-Komponente umschließen.

In neueren Versionen des Vue-Routers müssen wir jedoch V-Slot verwenden, um die Props zu destrukturieren und sie an unseren inneren Slot zu übergeben. Dies enthält eine dynamische Komponente, die von einer Übergangskomponente umgeben ist.

<router-view v-slot="{ Komponente }">
  <Übergang>
    <Komponente: ist = "Komponente" />
  </Übergang>
</Router-Ansicht>

Übergänge zu Routen hinzufügen

Wenn Sie eine <Komponente> mit einem <Übergang> umschließen, wird standardmäßig jeder Route in Ihrer Anwendung der gleiche Übergang hinzugefügt.
Es gibt zwei Möglichkeiten, Übergänge für jede Route anzupassen.

Verschieben Sie den Übergang in jede Komponente

Erstens können wir, anstatt unsere dynamischen Komponenten mit der Übergangskomponente zu umschließen, den <Übergang> in jede einzelne Komponente verschieben. So was:

<Vorlage>
  <Übergang>
    <div Klasse="Wrapper">
      <!-- -->
    </div>
  </Übergang>
</Vorlage>

Dieser Vorgang wird auf diese Weise für jede Route fortgesetzt, die umgestellt werden muss. Dadurch können Sie jede Route durch Ändern des Übergangsnamens anpassen.

Dynamische Übergänge mit v-bind

Ein anderer Ansatz besteht darin, den Namen des Übergangs an eine Variable zu binden. Dann können Sie diese Variable dynamisch entsprechend Ihrem eigenen Pfad ändern.
Dies ist ein Beispiel aus der Vue-Router-Dokumentation. Verwenden Sie den Überwachungsmodus auf der aktuellen Route, um die Variable „transitionName“ dynamisch festzulegen.

<Übergang:name="Übergangsname">
  <Komponente: ist = "Komponente" />
</Übergang>

betrachten:
  '$route' (nach, von) {
    const toDepth = to.path.split('/').length
    const fromDepth = from.path.split('/').length
    this.transitionName = toDepth < fromDepth ? 'nach rechts schieben' : 'nach links schieben'
  }
}

Nachdem wir nun die Grundlagen der Vue-Router-Übergänge verstehen, schauen wir uns einige Beispiele an.

#1 – Farbverlaufsübergang

Der Seitenübergang mit Farbverlauf sollte der direkteste Animationseffekt sein. Dies kann durch Ändern der Transparenz des Elements erreicht werden.
Erstellen Sie zunächst einen Übergang namens „Fade“. Beachten Sie, dass der Übergangsmodus auf Out-In eingestellt ist.

Es gibt drei Übergangsmodi:

• Standard: Ein- und Ausblendübergänge erfolgen gleichzeitig
• in-out: Neue Elemente werden zuerst eingeblendet. Anschließend wird das aktuelle Element ausgeblendet.
• out-in: Das aktuelle Element wird zuerst ausgeblendet. Dann beginnt das neue Element eingeblendet zu werden.

Damit das neue Element reibungslos eingeblendet wird, müssen wir das aktuelle Element entfernen, bevor wir mit dem neuen Übergang beginnen. Sie müssen also den Modus = „out-in“ verwenden.

<router-view v-slot="{ Komponente }">
  <Übergangsname="Ausblenden" Modus="Aus-Ein">
    <Komponente: ist = "Komponente" />
  </Übergang>
</Router-Ansicht>

<transition> bietet mehrere CSS-Klassen, die während des Animationszyklus dynamisch hinzugefügt oder entfernt werden können.
Es gibt 6. verschiedene Übergangsklassen (3 für Einblenden und 3 für Ausblenden).

• v-enter-from / v-leave-from: der Anfangszustand des Übergangs, der nach Beginn des Übergangs entfernt wird
• v-enter-active / v-leave-active: Aktivierungszustand des Übergangs
• v-enter-to / v-leave-to: der Endzustand des Übergangs

Unser Einblendungsübergang hat eine Klasse namens „Fade-Enter-From“.

Wir möchten, dass die Ein- und Ausblendzustände eine Deckkraft von 0 haben. Wenn der Übergang dann aktiv ist, soll die Transparenz animiert werden.

Wir müssen die Transparenz nicht einmal auf 1 setzen, da die Klassen „Fade-Enter-From“ und „Fade-Leave-To“ während der Animation entfernt werden. Dadurch wird das Element selbst auf eine Standarddeckkraft von 1 animiert.

.fade-enter-active,
.fade-leave-active {
  Übergang: Deckkraft 0,5 s langsam;
}

.fade-enter-from,
.fade-verlassen-zu {
  Deckkraft: 0;
}

Bei einigen virtuellen Komponenten ist dies der endgültige Übergangseffekt.

#2 – Folienübergänge

Als nächstes folgt der Seiten-Folienübergang.

Die Vorlage sieht wie folgt aus. Da die Ein- und Ausblendübergänge gleichzeitig erfolgen sollen, möchten wir keinen speziellen Modus für die Übergänge festlegen.

<router-view v-slot="{ Komponente }">
  <Übergangsname="Folie">
    <Komponente: ist = "Komponente" />
  </Übergang>
</Router-Ansicht>

Um das Beispiel verständlicher zu machen, habe ich für jedes Bauteil eine Breite von 100 % und eine Größe von mindestens 1 vh festgelegt und auch die Hintergrundfarbe entsprechend eingestellt.

.wrapper {
  Breite: 100 %;
  Mindesthöhe: 100vh;
}

Schließlich animiert der Übergangsstil die absolute Position der verschobenen Komponente. Wenn Sie eine andere Gleitrichtung benötigen, ändern Sie einfach die festzulegende CSS-Eigenschaft (oben, unten, links, rechts).

.slide-enter-active,
.slide-leave-active {
  Übergang: alle 0,75 s Ausklang;
}


.slide-enter-to {
  Position: absolut;
  rechts: 0;
}


.slide-enter-from {
  Position: absolut;
  rechts: -100%;
}


.schieben-verlassen-zu {
  Position: absolut;
  links: -100%;
}


.slide-leave-from {
  Position: absolut;
  links: 0;
}

Dies ist das Endergebnis:

#3 – Zoom-Übergang

Der Skalenübergang ist dem Ein-/Ausblendübergang sehr ähnlich. Sie müssen den Modus auch auf Out-In einstellen, um die richtige Reihenfolge der Animationen sicherzustellen.

<router-view v-slot="{ Komponente }">
  <Übergangsname="Skala" Modus="Aus-Ein">
    <Komponente: ist = "Komponente" />
  </Übergang>
</Router-Ansicht>

Verwenden Sie dann Stile, um die Deckkraft und Transformation des Elements zu ändern: Skalierung.

.scale-enter-active,
.scale-leave-active {
  Übergang: alle 0,5 s mühelos;
}


.scale-enter-from,
.scale-leave-to {
  Deckkraft: 0;
  transformieren: Skalierung (0,9);
}

Damit dieser Übergang sauberer aussieht, können Sie die Hintergrundfarbe der gesamten Webseite auf Schwarz festlegen.

Dies ist das Endergebnis:

#4 – Übergänge kombinieren

Es gibt viele Übergangseffekte. Ein gängiger Ansatz besteht darin, einige grundlegende Übergänge miteinander zu kombinieren, beispielsweise Diashow und Zoom in einem Übergang zu kombinieren.

<router-view v-slot="{ Komponente }">
  <Übergangsname="Skalierung-Folie">
    <Komponente: ist = "Komponente" />
  </Übergang>
</Router-Ansicht>

.Skalieren-Verschieben-Eingeben-Aktiv,
.scale-slide-leave-active {
  Position: absolut;
  Übergang: alle 0,85 s Leichtigkeit;
}

.scale-slide-enter-from {
  links: -100%;
}

.scale-slide-enter-to {
  links: 0%;
}

.scale-slide-leave-from {
  transformieren: Skalierung(1);
}

.skalieren-schieben-verlassen-bis {
  transformieren: Skalierung (0,8);
}

Das ist der endgültige Effekt

Es sieht ziemlich gut aus.

#5 – Abschließende Gedanken

Als ich kürzlich Vue verbesserte, fand ich ein High-End-Tutorial zu Vue3+TS.

Damit ist dieser Artikel über 4 Möglichkeiten zur Implementierung von Routing-Übergangseffekten in Vue abgeschlossen. Weitere relevante Inhalte zu Vue-Routing-Übergangseffekten finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!