Die Macht des Namens Übergänge in Vue

0
6

Vue bietet mehrere Möglichkeiten zum Steuern, wie ein element oder eine Komponente visuell angezeigt, beim einfügen in den DOM. Beispiele können sein, fading, Schiebe-oder andere visuelle Effekte. Fast alle diese Funktionalität basiert, um eine einzelne Komponente: der übergang Komponente.

Ein einfaches Beispiel ist mit einem einzigen v, wenn-basierend auf einem booleschen Wert. Wenn der Boolesche Wert true, wird das element angezeigt wird. Wenn der Boolean false ist, wird das element ausgeblendet. Normalerweise ist dieses element würde nur pop in und aus der Existenz, aber mit dem Wechsel der Komponente, die Sie Steuern können, den visuellen Effekt.

<transition>
<div v-if=”isVisible”>ist dieser sichtbar?</div>
</transition>

Einige Artikel wurden geschrieben, die den übergang Komponente Recht gut, wie Artikel von Sarah Drasner, Nicolas iel, und Hassan Djirdeh. Jeder Artikel befasst sich mit verschiedenen Aspekten der Vue des übergangs der Komponente im detail. Dieser Artikel wird über das Thema erweitern durch die Fokussierung auf einen Aspekt des übergangs Komponente; die Tatsache, dass Sie können “benannt.”

<transition name=”fade”>
<div v-if=”isVisible”>ist dieser sichtbar?</div>
</transition>

Die erste änderung dieses Attribut bietet, ist, dass die CSS-Klassen injiziert auf das element zu, während der übergang-Sequenz vorangestellt, die durch den angegebenen Namen. Eigentlich wäre es eine fade-geben Sie anstelle von v-Eingabe aus dem obigen Beispiel. Dieses Attribut kann gut gehen über diese einfache Möglichkeit. Es kann verwendet werden, zu nutzen, bestimmte features von Vue und CSS, die erlaubt für einige interessante Ergebnisse.

Eine andere Sache zu beachten ist, dass das name-Attribut gebunden werden kann:

<- übergang v-bind:name=”currentTransition”>
<div v-if=”isVisible”>ist dieser sichtbar?</div>
</transition>

In diesem Beispiel wird die transition benannt werden, der Wert currentTransition aufgelöst wird. Diese einfache änderung bietet eine weitere Ebene der Optionen und Funktionen, um die app-Animationen. Mit statischen und dynamischen namens-übergänge, ein Projekt kann eine Reihe von vordefinierten übergänge bereit, um in der gesamten app, Komponenten, Erweiterung der vorhandenen übergänge angewendet wurden, schalten einer transition verwendet wird, bevor oder nachdem angewendet wird, erlaubt Benutzern, wählen Sie übergänge und Steuern, wie einzelne Elemente einer Liste übergang in Ort, basierend auf dem aktuellen Zustand von dieser Liste.

Dieser Artikel ist beabsichtigt, um diese Funktionen und erklären, wie Sie zu verwenden sind.

Was passiert, wenn übergänge benannt sind?

Standardmäßig, wenn ein übergang Komponente verwendet wird, gilt es bestimmte Klassen in einer bestimmten Reihenfolge, um das element. Diese Klassen genutzt werden kann, in CSS. Ohne CSS diese Klassen, im wesentlichen, nichts tun, für das element. Es besteht daher ein Bedarf für CSS dieser Art:

.v-eingeben,
.v-leave – {
Deckkraft: 0;
}

.v-enter-active,
.v-leave-active {
transition: 0.5 s;
}

Dies bewirkt, dass das element, fade in und out mit einer Dauer von einer halben Sekunde. Eine geringfügige änderung an den übergang stellt für elegante visuelle Rückmeldung an den Benutzer. Es gibt immer noch ein Problem zu berücksichtigen. Aber zuerst, was andere mit einem Namen übergang?

.fade-geben,
.fade-verlassen – {
Deckkraft: 0;
}

.fade-enter-active,
.fade-verlassen-active {
transition: 0.5 s;
}

Im wesentlichen die gleichen CSS, aber mit fade – Präfix anstelle von v-. Diese Namensgebung behebt das potentielle Problem kann auftreten, wenn die Standard-Klassennamen der übergang Komponente. Die v – Präfix macht die Klassen, die globalen Auswirkungen, vor allem, wenn die CSS in der style-block von der app root-Ebene. Dies würde in der Tat, das machen *alle* übergänge ohne name-Attribut über den gesamten app-verwenden Sie den gleichen übergangseffekt. Für kleine Anwendungen kann dies ausreichen, aber in größeren, komplexeren apps, es kann führen, um unerwünschte visuelle Effekte, als nicht alles sollte fade in und out über eine halbe Sekunde.

Benennung der übergänge bietet ein Maß an Kontrolle für den Entwickler während der gesamten Projekt, wie die verschiedenen Elemente oder Komponenten eingefügt oder entfernt werden visuell. Es wird vorgeschlagen, dass alle übergänge benannt werden — auch wenn es nur eins — zu etablieren die Gewohnheit, dies zu tun. Auch wenn eine app hat nur einen übergangseffekt, kann es notwendig sein, um eine neue hinzufügen zu einem späteren Zeitpunkt. Nachdem bereits genannten vorhandenen übergänge in das Projekt erleichtert den Aufwand für das hinzufügen eines neuen.

Aufbau einer Sammlung von übergang-Effekten

Benennung übergänge sorgt für eine einfache, aber sehr nützlich Prozess. Eine gängige Praxis sein könnte, zu schaffen den übergang Klassen als Teil der Komponente, die Sie verwenden. Wenn eine andere verbreitete Praxis der Festlegung des lösungsumfangs die Stile für eine Komponente fertig ist, werden diese Klassen werden nur für die jeweilige Komponente. Wenn zwei verschiedene Komponenten haben eine ähnliche übergänge in Stil Blöcke, dann sind wir einfach duplizieren von code.

Lassen Sie uns also überlegen Sie, ob Sie CSS für die übergänge in den style-block, der die Wurzel der app, in der Regel die app.vue-Datei. Für die meisten meiner Projekte Stelle ich Ihnen als der Letzte Abschnitt der style-block, so dass Sie leicht zu finden, die für Anpassungen und Ergänzungen. Halten Sie die CSS-Datei in diese Lage macht die übergangs-Effekte zur Verfügung für jeden Benutzer der übergangskomponente in der gesamten app. Hier sind Beispiele von einigen meiner Projekte.

.fade-geben,
.fade-verlassen-{ opacity: 0; }
.fade-enter-active,
.fade-verlassen-active { transition: 0.5 s; }

.dia-enter {
Deckkraft: 0;
transformieren: scale3d(2, 0.5, 1) translate3d(400px, 0, 0);
}

.dia-Eingabe-{ transform: scale3d(1, 1, 1); }
.dia-enter-active,
.dia-verlassen-active { transition: 0.5 s-cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.dia-verlassen { transform: scale3d(1, 1, 1); }

.dia-verlassen – {
Deckkraft: 0;
transformieren: scale3d(2, 0.5, 1) translate3d(-400px, 0, 0);
}

.drehen-geben Sie { transform: perspective(500 Pixel) rotate3d(0, 1, 0, 90deg); }
.drehen-enter-active,
.drehen-lassen-active { transition: 0.5 s; }
.drehen-lassen-zu { transform: perspective(500 Pixel) rotate3d(0, 1, 0, -90deg); }

Es gibt mehrere Möglichkeiten, um zu speichern diese übergangs-Klassen je nach Ihren wünschen und den Bedürfnissen des Projekts. Die erste, wie bereits erwähnt, ist es, halten es alle in der style-block von der app.vue-Datei. Sie können auch halten eine Sass teilweise alle übergänge im Projekt-Ordner “assets” und importieren Sie es in den app-style-block.

<style lang=”scss”>
@import “assets/_transitions.scss”;
</style>

Diese Methode erlaubt es, für Anpassungen und Ergänzungen der Sammlung von übergängen, die außerhalb des Vue-Dateien. Ein weiterer Vorteil dieses Setups ist, dass eine solche Datei kann leicht übertragen zwischen Projekten teilen, ist der übergang Effekte. Wenn ein Projekt bekommt eine neue transition, dann ist es leicht genug, um zu übertragen, das neben einem anderen Projekt, ohne zu berühren, Haupt-Projekt-Dateien.

Wenn Sie mit CSS anstelle von Sass, dann können Sie die Datei als eine Anforderung des Projekts. Sie können dies erreichen, indem Sie die Datei in den Ordner “assets” des Projektes und die Platzierung einer require-Anweisung in der main.js Datei.

require(“@/assets/übergänge.css”);

Eine weitere option ist der übergang Stile in eine statische CSS-Datei, die kann an anderer Stelle gespeichert sein, entweder in den öffentlichen Ordner des Projekts oder nur auf dem server selbst. Da dies eine reguläre CSS-Datei, keine Gebäude oder-Bereitstellung erforderlich wäre — nur einen link-Verweis in die index.html Datei.

<link rel=”stylesheet” type=”text/css” href=”/css/übergänge.css”>

Diese Datei könnte auch gespeichert werden, in ein CDN für alle Projekte zu teilen. Wenn die Datei aktualisiert wird, die änderungen werden sofort überall erhältlich, wo es referenziert wird. Wenn eine neue transition Namen erstellt, dann die vorhandenen Projekte können starten, mit dem neuen Namen, wie gebraucht.

Nun, lassen Sie uns verlangsamen, eine minute

Während wir bauen eine Sammlung von übergängen, die für den Einsatz in unserem Projekt, wir betrachten die Anwender gibt, die nicht wollen, dass die abrupte Animationen, oder die wollen nicht unbedingt Animationen überhaupt. Einige Leute könnten unsere Animationen over-the-top und unnötig, aber für einige, können Sie tatsächlich Probleme verursachen. Vor einiger Zeit WebKit eingeführt, die lieber-reduziert-motion Medien-Abfrage, um mit Hilfe möglich Vestibuläre-Spektrum-Störung Fragen. Eric Bailey postete auch ein schöner Einstieg in die media query wie gut.

In den meisten Fällen, indem die media-query-als ein Teil unserer Sammlung von übergängen ist ganz einfach und sollte berücksichtigt werden. Wir können entweder reduzieren Sie die Menge der Bewegung, des übergangs zur Verringerung der negativen Auswirkungen oder einfach schalten Sie Sie ab.

Hier ist ein einfaches Beispiel von einem meiner demos unter:

.next-enter {
Deckkraft: 0;
transformieren: scale3d(2, 0.5, 1) translate3d(400px, 0, 0);
}

.nächste-EINGABETASTE -, um { transform: scale3d(1, 1, 1); }
.weiter-enter-active,
.weiter-verlassen-active { transition: 0.5 s-cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.der nächsten lassen { transform: scale3d(1, 1, 1); }

.weiter-verlassen – {
Deckkraft: 0;
transformieren: scale3d(2, 0.5, 1) translate3d(-400px, 0, 0);
}

/* Wenn Animationen sind reduziert auf OS-Ebene, verwenden Sie einfachere übergänge */
@media screen and (bevorzugt-reduziert-Bewegung: senken) {
.next-enter {
Deckkraft: 0;
transform: translate3d(100px, 0, 0);
}

.weiter-enter-active,
.weiter-verlassen-active { transition: 0.5 s; }

.weiter-verlassen – {
Deckkraft: 0;
transform: translate3d(-100px, 0, 0);
}
}

In diesem Beispiel, ich nahm, was war ein etwas übertriebener übergang und machte es einfacher. Die animation ist eine Folie, die sich nach Links bewegt, mit einem elastischen Leichtigkeit, dann verkleinert sich und verblasst, wie es bewegt sich Weg. Wenn jemand das reduzieren motion Präferenz gesetzt, dann wird die animation wird eine viel einfacher übergang mit einem kürzeren Abstand (die gibt es eine langsamere Geschwindigkeit) und hält die verblassen. Wenn wir wollten, um Sie auszuschalten, dann müssten wir nur Verweis auf die Klassen mit der transition-Eigenschaft, und legen Sie deren Wert auf none.

Um dies zu testen erfordert das finden und die Auswahl eines Kontrollkästchens auf Ihrem jeweiligen OS. Auf Windows, Sie finden es in der Systemsteuerung > Center für erleichterte Bedienung – > Machen die computer einfacher zu sehen, Abschnitt; suchen Sie nach “alle nicht erforderlichen Animationen deaktivieren (wenn möglich).” Auf einem Mac, suchen Sie unter System-Einstellungen > Eingabehilfen > Anzeige; suchen Sie nach “Reduzieren die Bewegung.” Die neuesten iOS-Geräte haben eine ähnliche Einstellung unter Eingabehilfen als gut.

Lassen Sie uns bleiben Sie flexibel mit unseren übergänge Sammlung

Mit dieser Sammlung von übergängen, gibt es das Potenzial snag mangelnder Flexibilität, mit den Auswirkungen. Was zum Beispiel, wenn ein element muss einem etwas langsameren fade-Zeit? Lassen Sie uns sagen, dass alles andere in der Wirkung kann gleich bleiben, nur die transition-Dauer muss anders sein. Es gibt Möglichkeiten zur Anpassung für die zimmerreserviereung, ohne das Sie erstellen eine ganz neue transition Namen.

Die einfachste Methode ist die Verwendung einer inline-style direkt auf das element innerhalb der übergangskomponente.

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

Eine solche änderung kann auch durchgeführt werden durch die verschiedenen Möglichkeiten, Vue bietet Umgang mit Stilen und Klassen.

Lassen Sie uns sagen Sie, dass Sie die component-element mit dem Attribut ist für dynamische Komponenten wie diese:

<transition name=”fade” mode=”out-in”>
<Komponente :ist=”currentComponent”></component>
</transition>

Auch mit dieser dynamischen Komponente, die wir haben Optionen, um die Eigenschaften anpassen, die von der übergangs-Effekt. Wieder können wir einen inline-Stil auf die Komponente element, die auf das root-element der Komponente. Das root-element erhält auch der übergang Klassen, so würden wir direkt überschreiben Ihre Eigenschaften.

<transition name=”fade” mode=”out-in”>
<Komponente :ist=”currentComponent” style=”transition-duration: 6s;”></component>
</transition>

Eine weitere option ist die übergabe in den Requisiten, um unsere Komponenten. So, die gewünschten änderungen können angewendet werden durch die Komponente code auf seinem root-element.

<transition name=”fade” mode=”out-in”>
<Komponente :ist=”currentComponent” Dauer=”6s”></component>
</transition>
<Vorlage>
<div :Stil=”`transition-Dauer: ${duration}`”>eine Komponente</div>
</template>

<script>
export default {
name: “Komponente”,
Requisiten: {
Dauer: String
}
};
</script>

Wir können auch überschreiben Sie die Eigenschaften des übergangs der Klassen innerhalb der Komponente den Stil zu blockieren, vor allem, wenn es vorhanden ist.

<style scoped>
.fade-enter-active,
.fade-verlassen-active { transition-duration: 1s; }
</style>

In diesem Fall, wird die Komponente eine fade-Dauer von einer Sekunde statt der globalen Dauer von einer halben Sekunde. Wir können sogar noch einen Schritt weiter und haben unterschiedliche Dauer, für die jede Seite der Folge.

<style scoped>
.fade-enter-active { transition-duration: 1s; }
.fade-verlassen-active { transition-duration: 2s; }
</style>

Eine der globalen transition-Klassen können geändert werden, innerhalb der Komponente, wenn nötig. Obwohl dies nicht ganz so flexibel wie beim ändern der Eigenschaft außerhalb einer Klasse-Struktur, es kann trotzdem sehr nützlich sein in bestimmten Umständen.

Wie Sie sehen können, auch mit unserer Sammlung von vorgefertigten übergänge haben wir noch Optionen für Flexibilität.

Dynamische übergänge

Auch nach all den interessanten Dingen, die wir tun können, Vue übergang Komponente noch ein weiteres Interessantes feature wartet, erkundet zu werden. Das name-Attribut auf den übergang Komponente kann auch dynamisch sein in der Natur, was bedeutet, wir können ändern, wie der aktuelle übergang in Gebrauch.

Dies bedeutet, dass der übergang kann geändert werden, um verschiedene Animations-Effekte mit verschiedenen Situationen, mit Sitz in code. Zum Beispiel, wir hätten einen übergang zu ändern, weil die Antwort auf eine Frage, übergänge beschlossen von der Benutzer-Interaktion, und haben eine Liste mit verschiedenen übergängen, basierend auf dem aktuellen Zustand der Liste selbst.

Werfen wir einen Blick auf diese drei Beispiele.

Beispiel 1: Ändern der übergang basiert auf eine Antwort

In diesem Beispiel haben wir eine einfache mathematische Frage, die beantwortet werden müssen. Zwei zahlen werden zufällig ausgewählt und wir sind erwartet, dass Sie die Summe. Klicken Sie auf die Schaltfläche geklickt wird, um zu überprüfen, die Antwort gegen das erwartete Antwort. Eine kleine Meldung oben angezeigt wird, die Gleichung, die angibt, ob die Antwort wahr oder falsch ist. Wenn die Antwort richtig ist, wird die Benachrichtigung gegeben wird, einen übergang, der schlägt einen Kopf nickte, ja, mit einer up-und down-animation. Wenn Ihre Antwort falsch ist, wird die Meldung geht von Seite zu Seite, was auf ein Kopf schütteln Nein.

Siehe Stift
VueJS Dynamische Übergänge: Change-Übergang Basiert auf einer Antwort von Travis Almand (@talmand)
auf CodePen.

Die Logik dahinter ist nicht sonderlich kompliziert, noch ist die Einrichtung des übergangs. Hier der HTML:

<transition name=”currentTransition”>
<div id=”notification” :class=”Antwort.toString()” v-if=”answerChecked”>{{ Reaktion }}</div>
</transition>

Eher einfach in der Natur. Wir haben eine gebunden name auf den übergang und dann eine v-wenn auf die Benachrichtigung div. Wir wenden auch eine true oder false-Klasse zu schmücken, die Meldung beruht auf der Antwort.

Hier ist die CSS-Datei für die übergänge:

.positive-enter-active { animation: positive 1s; }
@keyframes positiv {
0% { transform: translate3d(0, 0, 0); }
25% { transform: translate3d(0, -20px, 0); }
50% { transform: translate3d(0, 20px, 0); }
75% { transform: translate3d(0, -20px, 0); }
100% { transform: translate3d(0, 0, 0); }
}

.negativ-enter-active { animation: negative 1s; }
@keyframes negative {
0% { transform: translate3d(0, 0, 0); }
25% { transform: translate3d(-20px, 0, 0); }
50% { transform: translate3d(20px, 0, 0); }
75% { transform: translate3d(-20px, 0, 0); }
100% { transform: translate3d(0, 0, 0); }
}

Du wirst sehen, dass ich mit CSS Animationen zu erreichen, die up-and-down-und Seite-zu-Seite-Effekte.

Hier sind einige JavaScript:

Methoden: {
randomProblem: function () {
diese.a = Math.floor(Math.random() * Math.Boden(10));
diese.b = Math.floor(Math.random() * Math.Boden(10));
},
überprüfen Sie: Funktion () {
diese.Antwort = this.a+.b === parseInt(this.Antwort);
diese.answerChecked = true;
diese.currentTransition =.Antwort ? “positiv”: “negativ”;
},
reset: Funktion () {
diese.Antwort = null;
diese.answerChecked = false;
diese.randomProblem();
}
}

Es gibt die randomProblem Methode, die sets bis zu unserer Gleichung. Die Methode der Prüfung, die darüber entscheidet, auf welcher übergangseffekt zu verwenden, basierend auf dem Vergleich der bereitgestellten Antwort mit der richtigen Antwort. Dann der einfache reset-Methode, die nur, gut, setzt alles.

Dies ist nur ein einfaches Beispiel. Ein anderes mögliches Beispiel ist, dass eine Benachrichtigung, die hat zwei verschiedene Effekte, je nachdem, ob die Meldung wichtig ist oder nicht. Wenn die Nachricht nicht allzu wichtig, dann können wir eine dezente animation, die nicht Auto fahren die Augen des Benutzers Weg von der aktuellen Aufgabe. Wenn es wichtig ist, konnten wir eine animation, ist mehr direkt in der Natur, in einer Bemühung zu zwingen, die Augen bis zu der Meldung.

Beispiel 2: Ändern Sie den übergang, basierend auf Benutzer-Interaktion

Eine andere Sache, die wir bauen können, ist ein Karussell von einigen Sortieren. Dies könnte die Folien der Präsentation, eine Bildergalerie oder eine Reihe von Anweisungen. Die grundlegende Idee ist, dass wir das Bedürfnis haben, zum präsentieren von Informationen an den Benutzer in einer Sequenz. In dieser Präsentation erhält der Benutzer entscheiden, Wann Sie gehen und ob Sie vorwärts oder rückwärts).

Siehe Stift
VueJS Dynamische Übergänge: Übergang Ändern, Basierend auf Benutzer-Interaktion von Travis Almand (@talmand)
auf CodePen.

Auch dies ist ein ziemlich einfaches setup. Die Beispiel, mehr oder weniger, ist eine dia-Präsentation Art von situation. Die beiden Schaltflächen am unteren Rand die Verschiebung zwischen zwei Komponenten mit einem gleitenden übergang. Einem realen Projekt würde mehr Komponenten oder vielleicht die Logik zum ändern der Inhalte der Komponenten, die basierend auf der aktuellen Folie. Dieses Beispiel soll einfach bleiben, zu zeigen, die Idee.

Hier der HTML:

<transition name=”currentTransition” mode=”out-in”>
<Komponente :ist=”slides[currentSlide]”></component>
</transition>

Sie werden sehen, dass wir nur den übergang, sobald die Komponente eingeschaltet ist durch eine Schranke-Attribut in die Komponente element.

Hier ist der CSS:

.next-enter {
Deckkraft: 0;
transformieren: scale3d(2, 0.5, 1) translate3d(400px, 0, 0);
}

.nächste-EINGABETASTE -, um { transform: scale3d(1, 1, 1); }
.weiter-enter-active,
.weiter-verlassen-active { transition: 0.5 s-cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.der nächsten lassen { transform: scale3d(1, 1, 1); }

.weiter-verlassen – {
Deckkraft: 0;
transformieren: scale3d(2, 0.5, 1) translate3d(-400px, 0, 0);
}

.prev-enter {
Deckkraft: 0;
transformieren: scale3d(2, 0.5, 1) translate3d(-400px, 0, 0);
}

.prev-Eingabe-{ transform: scale3d(1, 1, 1); }
.prev-enter-active,
.prev-verlassen-active { transition: 0.5 s-cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.prev-verlassen { transform: scale3d(1, 1, 1); }

.prev-verlassen – {
Deckkraft: 0;
transformieren: scale3d(2, 0.5, 1) translate3d(400px, 0, 0);
}

/* Wenn Animationen sind reduziert auf OS-Ebene, verwenden Sie einfachere übergänge */
@media screen and (bevorzugt-reduziert-Bewegung: senken) {
.als Nächstes geben Sie { opacity: 0; transform: translate3d(100px, 0, 0); }
.weiter-enter-active,
.weiter-verlassen-active { transition: 0.5 s; }
.weiter-verlassen-{ opacity: 0; transform: translate3d(-100px, 0, 0); }

.prev-geben Sie { opacity: 0; transform: translate3d(-100px, 0, 0); }
.prev-enter-active,
.prev-verlassen-active { transition: 0.5 s; }
.prev-verlassen-{ opacity: 0; transform: translate3d(100px, 0, 0); }
}

Hier haben wir zwei Transitionen, eine für, wenn der Benutzer klickt auf den “next” – Taste, und die andere ist für die “prev” – Taste. Jedes im wesentlichen Folien der Komponente in die entsprechende Richtung, mit der transform-Eigenschaft, aber mit ein paar extras zu erstellen, eine Art quetschen-Effekt für eine Cartoon-Gefühl. Wir nutzen auch bevorzugt-reduziert-Antrag auf änderung der animation eine einfachere fade mit einer kleinen Rutsche zur Seite in die entsprechende Richtung.

Nun, für die JavaScript:

Methoden: {
changeSlide: function (dir) {
diese.currentSlide = dir === ‘weiter’ ? diese.currentSlide + 1 : dies.currentSlide – 1;
diese.currentTransition = dir;
}
}

Jede Taste ruft die changeSlide-Methode für das click-Ereignis und übergibt die Richtung, die Sie vertritt. Dann haben wir einige Logik zu verfolgen, was die aktuelle Folie passiert zu sein. Eine einzelne Zeile steuert die transition zu verwenden. Da die Schaltfläche “weiter” geht “weiter” als der Richtung, es entspricht dem “weiter” – übergang in der CSS. Dasselbe gilt für die “prev” – Taste. Jedes mal, wenn der Benutzer auf eine Schaltfläche klickt, wird die app automatisch weiß, welche transition zu verwenden. Also, wir haben schönen übergang Effekte, Kontext bereitzustellen, in welche Richtung der Benutzer das Fortschreiten durch die Sequenz.

Beispiel 3: Change-übergang basiert auf der Liste Stand

Für unser letztes Beispiel sehen wir, wie das zu ändern-übergänge basierend auf den aktuellen Status einer Liste innerhalb einer transition-Gruppe-Komponente. Die Idee hier ist eine Liste aktualisiert werden, ein Element in einer Zeit mit einem anderen übergang, jedes mal.

Siehe Stift
VueJS Dynamische Übergänge: Übergang Ändern Basierend auf der Liste Stand von Travis Almand (@talmand)
auf CodePen.

In diesem Beispiel haben wir eine Liste von Städten auf der rechten Seite und eine leere Liste auf der linken Seite. Als Städte werden ausgewählt auf der rechten Seite, füllen Sie die Felder auf der linken Seite. Die erste Stadt, die Folien von oben, während fading in den Blick. Die nächsten Städte vor der letzten Folie entweder von der rechten oder linken, je nach der vorherigen übergang und die Letzte Stadt, die Folien von unten.

Hier der HTML:

<transition-Gruppe :name=”currentListTransition” tag=”ul” class=”Liste”>
<li v-=”(item, index) in der selectedItems” :key=”item”>{{ item }}</li>
</transition-Gruppe>

Wie gewohnt, ein sehr einfaches setup. Hier sind die übergänge in CSS:

.top-enter-active,
.top-verlassen-active { transition: 0.5 s; }
.top-eingeben,
.top-verlassen – {
Deckkraft: 0;
transform: translate3d(0, -40px, 0);
}

.top-bewegen {
opacity: 0.5;
transition: 0.5 s;
}

.Links-geben Sie-aktiv,
.Links-abzugeben-active { transition: 0.5 s; }
.Links-enter
.Links-abzugeben – {
Deckkraft: 0;
transform: translate3d(-40px, 0, 0);
}

.Links-bewegen {
opacity: 0.5;
transition: 0.5 s;
}

.rechts-enter-active,
.rechts-verlassen-active { transition: 0.5 s; }
.rechts-enter
.rechts-verlassen – {
Deckkraft: 0;
transform: translate3d(40px, 0, 0);
}

.rechts-bewegen {
opacity: 0.5;
transition: 0.5 s;
}

.unten-enter-active,
.unten-verlassen-active { transition: 0.5 s; }
.unten-geben,
.unten-verlassen – {
Deckkraft: 0;
transform: translate3d(0, 30px, 0);
}

.unten bewegen {
opacity: 0.5;
transition: 0.5 s;
}

/* Wenn Animationen sind reduziert auf OS-Ebene, schalten Sie übergänge */
@media screen and (bevorzugt-reduziert-Bewegung: senken) {
.top-enter-active,
.top-verlassen-active { transition: “none”;}
.top-bewegen { transition: “none”;}
.Links-geben Sie-aktiv,
.Links-abzugeben-active { transition: “none”;}
.Links-bewegen { transition: “none”;}
.rechts-enter-active,
.rechts-verlassen-active { transition: “none”;}
.rechts-bewegen { transition: “none”;}
.unten-enter-active,
.unten-verlassen-active { transition: “none”;}
.unten bewegen { transition: “none”;}
}

Wie Sie sehen können, ist ein übergang für jede mögliche Richtung der Städte erscheint die leere Liste.

Nun, für unsere JavaScript:

Methoden: {
chooseCity: function (index) {
lassen Sie selectedLength =.selectedItems.Länge;
lassen Sie citiesLength =.Städte.Länge;
lassen clt =.currentListTransition;

wenn (selectedLength === 0) {
clt = ‘top’;
} else if (selectedLength > 0 && selectedLength < citiesLength – 1) {
clt = clt === ‘top’ || clt === ‘Links’ ? ‘right’ : ‘Links’;
} else if (selectedLength === citiesLength – 1) {
clt = ‘unten’;
}

diese.currentListTransition = clt;
diese.selectedItems.push(dies.Städte[index]);
Dokument.querySelector(`.Stadt:nth-child(${index + 1})`).classList.add(‘selected’);
},

clearSelection: function () {
diese.currentListTransition = ‘right’;
diese.selectedItems = [];
Dokument.querySelectorAll(‘.Stadt.selected’).forEach(element => {
element.classList.remove(‘selected’);
});
}
}

Die chooseCity-Methode verarbeitet, was passiert, wie Sie wählen, jede Stadt. Was uns hauptsächlich interessiert, ist die Reihe von if-und if/else-Anweisungen in der Mitte der Methode. Da die Städte ausgewählt werden, die Logik sieht bei der aktuellen Länge der selectedItems-array, das die ausgewählten Städte schließlich bugsiert. Wenn die Länge null ist, dann ist das die erste Stadt, damit der übergang sollte es kommen von oben. Wenn die Länge zwischen null und der Gesamtzahl der Städte-Liste, dann ist der übergang nach rechts oder Links. Die neue Richtung ist die Richtung der früheren übergang Richtung. Dann, endlich, wenn wir auf die Letzte Stadt, die gewählt werden, werde es ändern auf der unteren übergang. Wieder verwenden wir bevorzugt-reduziert-Bewegung, in diesem Fall zum ausschalten der übergänge insgesamt.

Eine andere option zum ändern der übergänge für eine Liste verändert sich entsprechend der Art der Elemente gewählt wird; wie east coast versus west coast Städten, die jeweils unterschiedlichen übergängen. Überlegen Sie, ob Sie den übergang auf der Grundlage der aktuellen Anzahl der Elemente der Liste Hinzugefügt; zum Beispiel, einen anderen übergang für alle fünf Elemente.

So long, und danke für die übergänge

Nach all diesen Beispielen und Ideen, ich hoffe, dass Sie erwägen, die Nutzung Vue übergang Komponente in Ihre eigenen Projekte. Die Möglichkeiten für das hinzufügen von übergängen und Animationen, um Ihre apps zu bieten, Kontext und Interesse für Ihre Nutzer. In vielen Fällen Ergänzungen wie diese sind ziemlich einfach zu implementieren, fast bis zu dem Punkt, dass es eine Schande, nicht, um Sie hinzuzufügen. Vue bietet ein spannendes und sehr nützliches feature, das den übergang Komponente, aus der box und ich kann nur empfehlen seine Verwendung.

Cheers.