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>控制面板> 易于訪問(wèn)中心> 使計(jì)算機(jī)更容易查看</kbd>. Suchen Sie nach "Schlie?en Sie alle unn?tigen Animationen (wenn m?glich). überprüfen Sie auf einem Mac<kbd>系統(tǒng)偏好設(shè)置> 輔助功能> 顯示</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> 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!