Die Kraft benannter Übergänge in Vue

VUE.JS bietet eine Vielzahl von Möglichkeiten, um zu steuern, wie Elemente oder Komponenten beim Einfügen in DOM visuell gerendert werden, z. B. in das Verblassen, das Schieben oder andere visuelle Effekte. Fast alle diese Funktionen basieren auf einer einzelnen Komponente: der Übergangskomponente .

Ein einfaches Beispiel ist v-if das auf einem Booleschen Wert basiert. Wenn der Boolesche wahr ist, erscheint das Element; Wenn es falsch ist, verschwindet das Element. Normalerweise erscheint und verschwindet dieses Element plötzlich, aber mit der Übergangskomponente können Sie die visuellen Effekte steuern.

<transition><div v-if="isVisible"> Ist es sichtbar?</div></transition>

Viele Artikel bieten eine gute Einführung in Übergangskomponenten, wie die von Sarah Drasner, Nicolas Udy und Hassan Djirdeh. Jeder Artikel beschreibt verschiedene Aspekte der VUE -Übergangskomponente. Dieser Artikel konzentriert sich auf einen Aspekt der Übergangskomponenten: Sie können "benannt" werden.

<transition name="fade"><div v-if="isVisible"> Ist es sichtbar?</div></transition>

Die anfängliche Änderung dieser Eigenschaft besteht darin, dass die CSS -Klasse, die während der Übergangssequenz in ein Element injiziert wurde, mit dem gegebenen Namen vorangestellt wird. Grundsätzlich wird es anstelle v-enter fade-enter . Diese einzelne Eigenschaft hat viel mehr als diese einfache Option. Es kann verwendet werden, um bestimmte Merkmale von Vue und CSS zu nutzen, um einige interessante Ergebnisse zu erzielen.

Eine andere Sache zu berücksichtigen ist, dass das Namensattribut gebunden werden kann:

<transition :name="currentTransition"><div v-if="isVisible"> Ist es sichtbar?</div></transition>

In diesem Beispiel wird der Übergang als Wert bezeichnet, an das durch currentTransition analysiert wird. Diese einfache Änderung bietet eine weitere Ebene von Optionen und Funktionen für die Animation der Anwendung. Mit statischen und dynamischen Benennungsübergängen können Projekte über eine Reihe von vorgefertigten Übergängen verfügen, die in der gesamten Anwendung angewendet werden können, die auf ihre vorhandenen Übergänge angewendeten Komponenten erweitern können, wechseln Übergänge, die vor oder nach der Anwendung verwendet werden, die Benutzer ermöglichen, Überschreitungen auszuwählen und zu steuern, wie einzelne Elemente des Listenübergangs auf dem aktuellen Staat der Liste der Liste der Liste der Liste erfolgen.

Dieser Artikel zielt darauf ab, diese Funktionen zu untersuchen und zu erklären, wie sie verwendet werden.

Was passiert bei der Benennung von Übergängen?

Bei der Verwendung der Übergangskomponente wendet es standardmäßig bestimmte Klassen auf Elemente in einer bestimmten Reihenfolge an. Diese Klassen können in CSS verwendet werden. Ohne CSS haben diese Klassen tatsächlich keinen Einfluss auf die Elemente. Daher ist CSS dieser Art erforderlich:

 .V-Einentwicklung,
.V-Leave-to {
  Deckkraft: 0;
}

.v-Enter-aktiv,
.V-Leave-aktiv {
  Übergang: 0,5s;
}

Dies führt dazu, dass das Element eine halbe Sekunde lang ein- und ausgeht. Die leichten Änderungen des Übergangs bieten den Benutzern ein elegantes visuelles Feedback. Es gibt jedoch noch ein Problem zu berücksichtigen. Aber zuerst, was ist der Unterschied zwischen Namensübergängen?

 .Fade-Enter,
.Fade-Leave-to {
  Deckkraft: 0;
}

.Fade-Enter-aktiv,
.Fade-Leave-Active {
  Übergang: 0,5s;
}

Grundsätzlich das gleiche CSS, aber mit fade- als Präfix anstelle von v- . Diese Benennung löst Probleme auf, die bei Verwendung des Standardklassennamens der Übergangskomponente auftreten können. v- Präfix macht die Klasse tatsächlich global, insbesondere wenn es CSS in einem Stilblock auf der Anwendungsroot-Ebene platziert. Dadurch wird die * alle * Übergänge ohne das Namensattribut in der gesamten Anwendung tatsächlich den gleichen Übergangseffekt verwendet. Für kleinere Anwendungen kann dies ausreichen, aber in größeren, komplexeren Anwendungen kann dies zu schlechten Bildern führen, da nicht alles in einer halben Sekunde ein- und ausblenden sollte.

Der Namensschreiber bietet Entwicklern während des gesamten Projekts, wie Sie verschiedene Elemente oder Komponenten visuell einfügen oder löschen können. Es wird empfohlen, dass alle Übergänge benannt werden - wenn auch nur eine -, um die Gewohnheit zu entwickeln. Auch wenn die Anwendung nur einen Übergangseffekt hat, muss in Zukunft möglicherweise ein neuer Übergangseffekt hinzugefügt werden. Die vorhandenen Übergänge wurden im Projekt genannt, was die Bemühungen, neue Übergänge hinzuzufügen, vereinfacht.

Erstellen Sie eine Reihe von Übergangseffekten

Die Benennung von Übergängen liefern einen einfachen, aber sehr nützlichen Prozess. Eine gängige Praxis könnte darin bestehen, Übergangsklassen als Teil der Komponenten zu erstellen, die sie verwenden. Wenn eine weitere übliche Praxis von Scoped -Komponenten -Stilen abgeschlossen ist, stehen diese Klassen nur für diese bestimmte Komponente zur Verfügung. Wenn zwei verschiedene Komponenten ähnliche Übergänge in ihren Stilblöcken haben, wiederholen wir den Code nur.

Betrachten wir also in Betracht, das Übergangs -CSS im Stilblock des Anwendungsroot -Verzeichnisses, in der normalerweise app.vue -Datei, zu halten. In den meisten meiner Projekte habe ich sie in den letzten Teil des Stilblocks gestellt, um nach Anpassung und Ergänzung zu suchen. Speichern Sie CSS an diesem Ort, damit der Übergangseffekt für jede Verwendung der Übergangskomponente während der gesamten Anwendung verwendet werden kann. Hier sind einige Beispiele aus einigen meiner Projekte.

 .Fade-Enter,
.Fade-Leave-to {Deckkraft: 0; }
.Fade-Enter-aktiv,
.Fade-Leave-Active {Übergang: 0,5s; }

.Slide-Enter {
  Deckkraft: 0;
  Transformation: Scale3D (2, 0,5, 1) Translate3D (400px, 0, 0);
}

.Slide-Enter-to {Transformation: scale3d (1, 1, 1); }
.Slide-Enter-aktiv,
.Slide-Leave-Active {Übergang: 0,5s kubisch-bezier (0,68, -0,55, 0,265, 1,55); }
.Slide-Leave {Transformation: Scale3D (1, 1, 1); }

.Slide-Leave-to {
  Deckkraft: 0;
  Transformation: Scale3D (2, 0,5, 1) Translate3D (-400px, 0, 0);
}

.Rotate-Enter {Transformation: Perspektive (500px) rotate3d (0, 1, 0, 90de); }
.Rotate-Enter-aktiv,
.Rotate-Leave-aktiv {Übergang: 0,5s; }
.Rotate-Leave-to {Transformation: Perspektive (500px) rotate3d (0, 1, 0, -90de); }

Abhängig von Ihren Vorlieben und Projektanforderungen gibt es verschiedene Möglichkeiten, diese Übergangsklassen zu speichern. Der erste, wie bereits erwähnt, besteht darin, alles im Stilblock der app.vue -Datei zu speichern. Sie können auch alle Übergangs -Sass -Teile des Projekts im Ordner des Projekts des Projekts speichern und in den Stilblock der Anwendung importieren.

 @import "assets/_transitions.scss";

Diese Methode ermöglicht das Optimieren und Hinzufügen von Übergangskollektionen außerhalb von VUE -Dateien. Ein weiterer Vorteil dieses Setups besteht darin, dass Sie solche Dateien leicht zwischen Projekten übertragen können, wenn das Projekt Übergangseffekte aufweist. Wenn ein Projekt einen neuen Übergang erhält, ist es einfach, den hinzugefügten Inhalt auf ein anderes Projekt zu übertragen, ohne die Hauptprojektdatei zu berühren.

Wenn Sie CSS anstelle von SASS verwenden, können Sie die Datei als Abhängigkeit für Ihr Projekt einfügen. Sie können dies tun, indem Sie die Datei im Ordner Ihres Projekts Ihres Projekts speichern und eine require in der main.js -Datei platzieren.

 fordern ("@/assets/transitions.css");

Eine andere Möglichkeit besteht darin, den Übergangsstil in einer statischen CSS -Datei zu speichern, die an anderer Stelle, entweder im öffentlichen Ordner des Projekts oder direkt auf dem Server, gespeichert werden kann. Da es sich um eine reguläre CSS -Datei handelt, müssen Sie nicht erstellen oder bereitstellen. Fügen Sie einfach eine Linkreferenz in die Datei index.html ein.

<link href="/css/transitions.css" rel="stylesheet" type="text/css">

Diese Datei kann auch möglicherweise in einem CDN für die Freigabe aller Projekte gespeichert werden. Immer wenn die Datei aktualisiert wird, sind die Änderungen sofort an allen Stellen verfügbar, an denen sie verwiesen wird. Wenn ein neuer Übergangsname erstellt wird, kann das vorhandene Projekt nach Bedarf einen neuen Namen verwenden.

Lassen Sie uns nun eine Minute lang langsamer werden

Wenn wir eine Übergangskollektion erstellen, die während unseres Projekts verwendet werden soll, betrachten wir Benutzer, die möglicherweise nicht möchten, dass die Animation zu plötzlich ist oder die Animation überhaupt nicht erscheint. Einige mögen denken, dass unsere Animationen zu übertrieben und unnötig sind, aber für andere können sie tatsächlich Probleme verursachen. Vor einiger Zeit führte Webkit prefers-reduced-motion zur Lösung möglicher vestibulärer Spektrum-Barrieren ein. Eric Bailey veröffentlichte auch eine gute Einführung in Medienfragen.

In den meisten Fällen ist es sehr einfach, Medienabfragen als Teil unseres Übergangssatzes zu haben und sollte berücksichtigt werden. Wir können die Auseinandersetzung mit dem Übergang reduzieren, um die negativen Auswirkungen zu verringern oder sie einfach auszuschalten.

Hier ist ein einfaches Beispiel aus einem meiner Demos:

 .NEXT-ENTER {
  Deckkraft: 0;
  Transformation: Scale3D (2, 0,5, 1) Translate3D (400px, 0, 0);
}

.Next-Enter-to {Transformation: scale3d (1, 1, 1); }
.Next-Enter-aktiv,
.Next-Leave-Active {Übergang: 0,5s kubisch-bezier (0,68, -0,55, 0,265, 1,55); }
.Next-Leave {Transform: Scale3D (1, 1, 1); }

.Next-Leave-to {
  Deckkraft: 0;
  Transformation: Scale3D (2, 0,5, 1) Translate3D (-400px, 0, 0);
}

/* Verwenden Sie einfachere Übergänge, wenn die Animation auf Betriebssystemebene reduziert wird*///
@media Screen und (bevorzugt (bevorzugt man reduzierte Motion: Reduzieren Sie) {{
  .NEXT-ENTER {
    Deckkraft: 0;
    Transformation: Translate3d (100px, 0, 0);
  }

  .Next-Enter-aktiv,
  .Next-Leave-Active {Übergang: 0,5s; }

  .Next-Leave-to {
    Deckkraft: 0;
    Transformation: Translate3D (-100px, 0, 0);
  }
}

In diesem Beispiel habe ich einen ziemlich übertriebenen Übergang gemacht und ihn einfacher gemacht. Animation ist eine gleitende Animation, die sich nach links mit einem elastischen Effekt bewegt, dann schrumpft und verblasst, wenn sie entfernt wird. Wenn jemandes reduzierte Bewegungspräferenz eingestellt ist, wird die Animation zu einem einfacheren Übergang mit einer kürzeren Entfernung (die es langsamer macht) und verblasst weiter. Wenn wir sie ausschalten wollen, müssen wir uns nur mit dem transition auf die Klasse beziehen und ihre Werte auf none festlegen.

Um dies zu testen, müssen Sie ein Kontrollkästchen in Ihren jeweiligen Betriebssystemen finden und auswählen. Unter Windows finden Sie es im<kbd>控制面板> 易于访问中心> 使计算机更容易查看</kbd>. Suchen Sie nach "Schließen Sie alle unnötigen Animationen (wenn möglich). Überprüfen Sie auf einem Mac<kbd>系统偏好设置> 辅助功能> 显示</kbd>; Finden Sie "Sport reduzieren". Die neuesten iOS -Geräte haben ähnliche Einstellungen unter<kbd>辅助功能</kbd>.

Lassen Sie uns die Übergangssätze flexibel halten

Bei diesem Übergangssatz kann es Probleme mit der Unflexibilität geben. Was ist beispielsweise, wenn ein Element eine etwas langsamere Verblassenzeit benötigt? Unter der Annahme, dass alles andere in dem Effekt unverändert bleibt, ändern Sie einfach transition-duration . Es gibt Möglichkeiten, sich anzupassen, ohne einen völlig neuen Übergangsnamen zu erstellen.

Der einfachste Weg ist es, Inline -Stile direkt für Elemente innerhalb der Übergangskomponente zu verwenden.

<transition name="fade"><div style="transition-duration: 6s;" v-if="isVisible"> Dies hat unterschiedliche Dauer</div></transition>

Solche Änderungen können durch verschiedene Methoden zur Handhabung von Stilen und Klassen von Vue vorgenommen werden.

Angenommen, Sie verwenden Komponentenelemente mit is -Attribut, um dynamische Komponenten auszuführen, z. B.:

<transition mode="out-in" name="fade"><component :is="currentComponent"></component></transition>

Selbst mit dieser dynamischen Komponente haben wir Optionen, um die Eigenschaften des Übergangseffekts anzupassen. In ähnlicher Weise können wir einen Inline -Stil auf das Komponentenelement anwenden, das auf das Stammelement der Komponente platziert wird. Das Stammelement empfängt auch Übergangsklassen, sodass wir seine Eigenschaften direkt überschreiben.

<transition mode="out-in" name="fade"><component :is="currentComponent" style="transition-duration: 6s;"></component></transition>

Eine andere Möglichkeit besteht darin, die Requisiten an unsere Komponenten weiterzugeben. Auf diese Weise können die Änderungen, die sie benötigt, über den Code der Komponente auf sein Stammelement angewendet werden.

<transition mode="out-in" name="fade"><component :is="currentComponent" duration="6s"></component></transition>

<template><div :style="`transition-duration: ${duration}`"> Komponente eins</div></template>
<script>
export default {
  name: "component-one",
  props: {
    duration: String
  }
};
</script>

Wir können auch die Eigenschaften von Übergangsklassen innerhalb der Komponentenstilblöcke überschreiben, insbesondere in ihrem Bereich.

 .Fade-Enter-aktiv,
. }

In diesem Fall wird die Ausbrüche der Komponente eine Sekunde und nicht die globale Dauer einer halben Sekunde betragen. Wir können sogar noch einen Schritt weiter gehen und für jede Seite der Sequenz unterschiedliche Dauern einstellen.

 .Fade-Enter-aktiv {Übergangsdauer: 1s; }
. }

Jede globale Übergangsklasse kann nach Bedarf innerhalb der Komponente geändert werden. Dies ist zwar nicht so flexibel wie sich ändernde Eigenschaften außerhalb der Klassenstruktur, aber in einigen Fällen immer noch sehr nützlich.

Wie Sie sehen können, haben wir trotz unserer vorgebauten Übergangskollektion immer noch die Möglichkeit, flexibel zu sein.

Dynamischer Übergang

Auch nachdem wir all diese interessanten Dinge mit Vue's Transition -Komponente tun können, wartet eine weitere interessante Funktion darauf, erkundet zu werden. Die Namenseigenschaft in der Übergangskomponente kann dynamisch sein, was bedeutet, dass wir den derzeit verwendeten Übergang nach Belieben ändern können.

Dies bedeutet, dass Übergänge nach verschiedenen Situationen im Code geändert werden können, um unterschiedliche Animationseffekte zu haben. Zum Beispiel können wir den Übergang basierend auf den Antworten auf die Frage ändern, den Übergang basierend auf der Benutzerinteraktion entscheiden und die Liste basierend auf dem aktuellen Status der Liste selbst verwenden.

Schauen wir uns diese drei Beispiele an.

Beispiel 1: Ändern Sie den Übergang gemäß der Antwort

In diesem Beispiel haben wir ein einfaches mathematisches Problem zu beantworten. Wählen Sie zufällig zwei Zahlen und wir sollten die Summe von ihnen bereitstellen. Klicken Sie dann auf die Schaltfläche, um die Antwort mit der erwarteten Antwort zu vergleichen. Eine kleine Benachrichtigung erscheint über der Gleichung, die angibt, ob die Antwort wahr oder falsch ist. Wenn die Antwort korrekt ist, liefert die Benachrichtigung einen Vorschlag, um einen positiven Übergang der Aufwärts- und Abwärtsanimation anzuzeigen. Wenn Ihre Antwort falsch ist, bewegt sich die Benachrichtigung nach links und rechts und zeigt ein Zittern Ihres Kopfes und eine Negation an.

Die Logik dahinter ist nicht kompliziert und die Einstellung des Übergangs ist nicht kompliziert. Dies ist HTML:

<transition :name="currentTransition"><div v-if="answerChecked"> {{ Antwort }}</div></transition>

Die Natur ist recht einfach. Wir haben einen gebundenen Namen für den Übergang und dann einen v-if für die Benachrichtigungsdiv. Wir haben auch eine echte oder falsche Klasse angewendet, um Benachrichtigungen anhand der Antworten zu dekorieren.

Hier ist das Übergangs -CSS:

 .Positiv-Enter-aktiv {Animation: positiv 1s; }
@keyframes positiv {
  0% {Transform: Translate3D (0, 0, 0); }
  25% {Transformation: Translate3d (0, -20px, 0); }
  50% {Transform: Translate3d (0, 20px, 0); }
  75% {Transform: Translate3D (0, -20px, 0); }
  100% {Transform: Translate3d (0, 0, 0); }
}

.negative-Enter-aktiv {Animation: negativ 1s; }
@keyframes negativ {
  0% {Transform: Translate3D (0, 0, 0); }
  25% {Transformation: Translate3D (-20px, 0, 0); }
  50% {Transform: Translate3d (20px, 0, 0); }
  75% {Transform: Translate3D (-20px, 0, 0); }
  100% {Transform: Translate3d (0, 0, 0); }
}

Sie werden sehen, dass ich CSS -Animationen verwende, um Auf- und Linken und rechte Effekte zu erzielen.

Hier ist ein JavaScript -Code:

 Methoden: {
  randomproblem: function () {
    this.a = math.floor (math.random () * math.floor (10));
    this.b = math.floor (math.random () * math.floor (10));
  },
  Überprüfen Sie: function () {
    this.Response = this.a this.b === ParseInt (this.answer);
    this.ansVecocked = true;
    this.currentTransition = this.Response? 'positiv': 'negativ';
  },
  Reset: function () {
    this.answer = null;
    this.ansVecocked = false;
    this.randomproblem ();
  }
}

Hier ist die randomProblem -Methode, um unsere Gleichung festzulegen. Die check bestimmt, welcher Übergangseffekt anhand des Vergleichs der angegebenen Antwort mit der richtigen Antwort verwendet werden soll. Dann gibt es die einfache reset -Methode, die einfach alles zurücksetzt.

Dies ist nur ein einfaches Beispiel. Ein weiteres mögliches Beispiel ist eine Benachrichtigung mit zwei verschiedenen Effekten, je nachdem, ob die Benachrichtigung wichtig ist oder nicht. Wenn die Nachricht nicht sehr wichtig ist, können wir eine subtile Animation verwenden, mit der die Augen des Benutzers die aktuelle Aufgabe nicht verlassen können. Wenn es wichtig ist, können wir direktere Animationen verwenden, um das Auge zu erzwingen, um Benachrichtigungen nachzuschlagen.

Beispiel 2: Ändern Sie den Übergang basierend auf der Benutzerinteraktion

Eine andere Sache, die wir bauen können, ist eine Art Karussell. Dies kann eine Folienpräsentation, eine Bildergalerie oder eine Reihe von Anweisungen sein. Die Grundidee ist, dass wir den Benutzern Informationen in der Reihenfolge vorlegen müssen. Bei dieser Demonstration kann der Benutzer entscheiden, wann er fortgesetzt werden soll und ob er vorwärts oder rückwärts gehen soll.

Dies ist auch ein ziemlich einfaches Setup. Dieses Beispiel ist mehr oder weniger ein Fall für die Diaspräsentation. Die beiden Schaltflächen am unteren Bereich wechseln zwischen zwei Komponenten mit Gleitübergängen. Ein reales Projekt verfügt über mehr Komponenten oder kann die Logik des Komponenteninhalts je nach aktueller Folie ändern. Dieses Beispiel wird einfach gehalten, um die Idee zu demonstrieren.

Dies ist HTML:

<transition :name="currentTransition" mode="out-in"><component :is="slides[currentSlide]"></component></transition>

Sie werden sehen, dass wir beim Übergang des Komponentenelements, wenn die Komponente durch die Bindung is wird, nur den Übergang vornehmen.

Dies ist CSS:

 .NEXT-ENTER {
  Deckkraft: 0;
  Transformation: Scale3D (2, 0,5, 1) Translate3D (400px, 0, 0);
}

.Next-Enter-to {Transformation: scale3d (1, 1, 1); }
.Next-Enter-aktiv,
.Next-Leave-Active {Übergang: 0,5s kubisch-bezier (0,68, -0,55, 0,265, 1,55); }
.Next-Leave {Transform: Scale3D (1, 1, 1); }

.Next-Leave-to {
  Deckkraft: 0;
  Transformation: Scale3D (2, 0,5, 1) Translate3D (-400px, 0, 0);
}

.Prev-Enter {
  Deckkraft: 0;
  Transformation: Scale3D (2, 0,5, 1) Translate3D (-400px, 0, 0);
}

. }
.
. }
. }

.Prev-Leave-to {
  Deckkraft: 0;
  Transformation: Scale3D (2, 0,5, 1) Translate3D (400px, 0, 0);
}

/* Verwenden Sie einfachere Übergänge, wenn die Animation auf Betriebssystemebene reduziert wird*///
@media Screen und (bevorzugt (bevorzugt man reduzierte Motion: Reduzieren Sie) {{
  .Next-Enter {Opazität: 0; Transformation: Translate3d (100px, 0, 0); }
  .Next-Enter-aktiv,
  .Next-Leave-Active {Übergang: 0,5s; }
  .Next-Leave-to {Opazität: 0; Transformation: Translate3D (-100px, 0, 0); }

  . Transformation: Translate3D (-100px, 0, 0); }
  .
  . }
  . Transformation: Translate3d (100px, 0, 0); }
}

Hier haben wir zwei Übergänge, eine für die Schaltfläche "Nächster", wenn der Benutzer auf die Schaltfläche "Nächster" und die andere für die Schaltfläche "vorher" klickt. Jede verwendet im Grunde transform , um die Komponente in die entsprechende Richtung zu schieben. Es gibt jedoch einige zusätzliche, um einen Quetsch -Effekt für einen Cartoon -Effekt zu erzielen. Wir verwenden auch prefers-reduced-motion um die Animation in einen einfacheren Fade-Effekt zu ändern und sie ein wenig in die richtige Richtung zu wischen.

Jetzt für JavaScript:

 Methoden: {
  Änderungenslide: Funktion (Dir) {
    this.currentSlide = dir === 'Next'? this.currentSlide 1: this.currentSlide - 1;
    this.currentTransition = Dir;
  }
}

Jede Schaltfläche ruft die changeSlide -Methode in ihrem Klickereignis auf und übergibt die Richtung, die sie darstellt. Dann haben wir eine Logik, um zu verfolgen, was die aktuelle Folie ist. Einzelliniencode steuert, welche Übergangs verwendet werden soll. Da die Schaltfläche "Nächster" als nächstes als Richtung passt, entspricht sie dem "nächsten" Übergang in CSS. Gleiches gilt für die Schaltfläche "vorher". Jedes Mal, wenn der Benutzer auf eine Schaltfläche klickt, weiß die Anwendung automatisch, welcher Übergang verwendet werden soll. Daher haben wir einen guten Übergangseffekt, der einen Kontext über die Richtung liefern kann, in die der Benutzer in der Sequenz führt.

Beispiel 3: Ändern Sie den Übergang basierend auf dem Listenstatus

Für unser letztes Beispiel lernen wir, wie der Übergang auf der Grundlage des aktuellen Status der Liste innerhalb transition-group geändert wird. Die Idee hier ist eine Liste, jedes Mal, wenn ein Element aktualisiert wird, jedes Mal mit einem anderen Übergang.

In diesem Beispiel zeigen wir die Stadtliste rechts und die leere Liste links. Bei der Auswahl der Städte rechts füllen sie die Lücken links aus. Die erste Stadt rutscht von oben ein und verblasst in die Aussicht. Die nächste Stadt vor der letzten Stadt wird von rechts oder links einrutschen, abhängig vom vorherigen Übergang wird die letzte Stadt von unten einrutschen.

Dies ist HTML:

<transition-group :name="currentListTransition" tag="ul"><li :key="item" v-for="(item, index) in selectedItems"> {{ Artikel }}</li></transition-group>

Wie üblich ein ziemlich einfaches Setup. Hier sind die Übergänge in CSS:

 .Top-Enter-aktiv,
.Top-Leave-Active {Übergang: 0,5s; }
.Top-Enter,
.Top-Leave-to {
  Deckkraft: 0;
  Transformation: Translate3d (0, -40px, 0);
}

.top-move {
  Deckkraft: 0,5;
  Übergang: 0,5s;
}

.Left-Enter-aktiv,
.Left-Leave-Active {Übergang: 0,5s; }
.LEFT-ENTER,
.left-Leave-to {
  Deckkraft: 0;
  Transformation: Translate3D (-40px, 0, 0);
}

.left-move {
  Deckkraft: 0,5;
  Übergang: 0,5s;
}

.
.Right-Leave-Active {Übergang: 0,5s; }
.
.Right-Leave-to {
  Deckkraft: 0;
  Transformation: Translate3d (40px, 0, 0);
}

.Right-Move {
  Deckkraft: 0,5;
  Übergang: 0,5s;
}

.Bottom-Enter-aktiv,
.Bottom-Leave-Active {Übergang: 0,5s; }
.Bottom-Enter,
.Bottom-Leave-to {
  Deckkraft: 0;
  Transformation: Translate3d (0, 30px, 0);
}

.bottom-move {
  Deckkraft: 0,5;
  Übergang: 0,5s;
}

/* Wenn die Animation auf Betriebssystemebene reduziert wird, schließen Sie den Übergang*/
@media Screen und (bevorzugt (bevorzugt man reduzierte Motion: Reduzieren Sie) {{
  .Top-Enter-aktiv,
  .Top-Leave-aktiv {Übergang: Keine; }
  .Top-move {Übergang: Keine; }
  .Left-Enter-aktiv,
  .Left-Leave-aktiv {Übergang: Keine; }
  .left-move {Übergang: Keine; }
  .
  .Right-Leave-aktiv {Übergang: Keine; }
  .Right-Move {Übergang: Keine; }
  .Bottom-Enter-aktiv,
  .Bottom-Leave-aktiv {Übergang: Keine; }
  .Bottom-move {Übergang: Keine; }
}

Wie Sie sehen können, erscheint jede mögliche Stadtrichtung in der leeren Liste mit einem Übergang.

Jetzt für unser JavaScript:

 Methoden: {
  Choosecity: Funktion (Index) {
    SelectedLength = this.selectedItems.length;
    lass CitiesLength = this.cities.length;
    lass CLT = this.currentListTransition;

    if (selectedLength === 0) {
      CLT = 'TOP';
    } else if (selectedLength> 0 && selectedLength <citieslength clt="CLT" anders this.currentlisttransition="CLT;" this.selecteditems.push this.cities.splice><p> Die <code>chooseCity</code> -Methode behandelt das, was bei der Auswahl jeder Stadt passiert. Was uns hauptsächlich befasst ist, ist eine Reihe von <code>if</code> und <code>if/else</code> in der Mitte der Methode. Wenn eine Stadt ausgewählt wird, befasst sich die Logik auf die aktuelle Länge des <code>selectedItems</code> -Arrays, das die ausgewählte Stadt in die Stadt drückt. Wenn die Länge Null ist, ist dies die erste Stadt, sodass der Übergang ihn von oben eingeben sollte. Wenn die Länge zwischen Null und der Gesamtzahl der Stadtlisten liegt, sollte der Übergang recht oder links sein. Die verwendete neue Richtung basiert auf der Richtung der vorherigen Übergangsrichtung. Wenn wir dann die letzte Stadt auswählen, ändert sich schließlich der untere Übergang. Auch hier verwenden wir <code>prefers-reduced-motion</code> , die den Übergang in diesem Fall vollständig schließt.</p>
<p> Eine weitere Option zum Ändern des Listenübergangs besteht darin, Änderungen basierend auf dem Typ des ausgewählten Elements vorzunehmen. Zum Beispiel hat jede Stadt Ostküsten- und Westküstenstädte. Erwägen Sie, den Übergang basierend auf der aktuellen Anzahl der zu der Liste hinzugefügten Elementen zu ändern. Zum Beispiel ein anderer Übergang für jeweils fünf Elemente.</p>
<h3 id="Auf-Wiedersehen-danke-für-alle-Übergänge"> Auf Wiedersehen, danke für alle Übergänge</h3>
<p> Nach all diesen Beispielen und Ideen hoffe ich, dass Sie in Betracht ziehen, die Übergangskomponente von Vues in Ihrem eigenen Projekt auszunutzen. Erforschen Sie die Möglichkeiten des Hinzufügens von Übergängen und Animationen zu Ihrer App, um Ihren Benutzern Kontext und Interessen bereitzustellen. In vielen Fällen sind solche Ergänzungen sehr einfach zu implementieren, fast bis zu dem Punkt, an dem es schade ist, sie nicht hinzuzufügen. Vue bietet eine aufregende und sehr nützliche Funktion außerhalb des Boxs, die Übergangskomponente, die ich nur fördern kann.</p>
<p> Prost.</p></citieslength>

Das obige ist der detaillierte Inhalt vonDie Kraft benannter Übergänge in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!