Beispiel für einen Vue-Übergang zum Erreichen eines Animationseffekts

Ergebnisse auf einen Blick

Herzeffekt

Materialien: Zwei Herzsymbole. Wenn es keine Symbolkomponente wie bei mir gibt, verwenden Sie stattdessen ein PNG-Bild.

<transition :name="isLike ? 'zoom' : '' " mode="raus-ein">
    <!-- Herz-Symbol-->
    <icon data="@icon/like.svg" color="#FF0000" v-if="isLike" key="like"></icon>
    <icon data="@icon/unlike.svg" color="#333333" v-else key="unlike"></icon>
</Übergang>

Weil es eine Animation gibt, wenn Sie einen Button mit „Gefällt mir“ markieren, aber keine Animation, wenn Sie einen Button mit „Gefällt mir“ markieren, muss sich das Attribut „Name“ des Übergangs entsprechend der Variable „isLike“ ändern. Wenn isLike true ist, geben Sie ihm eine Zoomanimation, andernfalls keine Animation. Der Animationsmodus ist „Out-In“, was bedeutet: „Wer zuerst rauskommt, der letzte rein.“ Das ursprüngliche Symbol ändert sich von groß zu klein und dann ändert sich das neue Symbol von klein zu groß.

Beachten Sie, dass Sie, wenn die Namen der beiden Schaltkomponenten gleich sind, das Schlüsselattribut hinzufügen müssen, um die beiden Komponenten zu unterscheiden. Andernfalls wird die Animation nicht wirksam.

Als nächstes schreiben Sie CSS

/** Die Klasse der laufenden Animation **/
.zoom-enter-active, .zoom-leave-active {
    Übergang: alle .15s kubisch-bezier (0,42, 0, 0,34, 1,55);
}

/** Legen Sie den Startzustand des Eintrags und den Endzustand des Austritts fest. Beide werden auf 0 skaliert. **/
.zoom-enter, .zoom-leave-to {
    transformieren: Skalierung(0);
}

/** Setzt den Eintrags-Endstatus und den Austritts-Startstatus, beide werden auf 1 skaliert **/
.zoom-enter-to, .zoom-leave {
    transformieren: Skalierung(1);
}

Laut der offiziellen Dokumentation werden .name-enter-active und .name-leave-active während der Animation auf die Klasse der Symbolkomponente gesetzt, daher legen wir hier die Animationseigenschaften, Zeit und Kurve des Übergangs fest.

Da wir das Bild beim Vergrößern etwas größer als scale(1) machen und dann zur Normalgröße zurückkehren müssen, müssen wir die Animationskurve cubic-bezier(0.42, 0, 0.34, 1.55) anpassen. Wie ist diese Kurve entstanden?

Öffnen Sie das Chrome-Debug-Panel, suchen Sie ein DOM und legen Sie die Übergangszeitfunktion „Ease“ fest. Klicken Sie dann auf das kleine Kurvensymbol neben „Ease“.

Ziehen Sie die Zugleiste, um die Kurve anzupassen

Lassen Sie die Kurve am Ende der Animation einfach über den Endpunkt hinaus verlängern.

Kopieren Sie dann den Wert cubic-bezier(0.25, 0.1, 0.27, 1.32) unterhalb des Kurvenfeldes.

Auf die Animationszeitkurven werde ich hier nicht näher eingehen, da es im Internet bereits viel Wissenswertes dazu gibt.

Was den Zoom-Teil betrifft, wird gemäß den obigen CSS-Einstellungen und mode="out-in" der Animationsmodus zuerst aus- und dann eingeschaltet, wenn auf die Schaltfläche "Gefällt mir" geklickt wird.

1. Die ursprüngliche Liebe beginnt, die Bildfläche zu verlassen. Zu diesem Zeitpunkt beträgt die ursprüngliche Liebesskala 1, was 100 % der Größe entspricht.
2. Das Herz verlässt die Szene. Es beginnt, von 1 auf 0 zu skalieren, was 0 % der Größe entspricht.
3. Die ursprüngliche Liebe hat die Bühne verlassen und die neue Liebe beginnt, die Bühne zu betreten. Zu diesem Zeitpunkt ist der Skalenstatus der neuen Liebe 0
4. Das neue Herz betritt die Szene. Die Animation beginnt bei 0 und skaliert bis zum Endzustand 1.
   

Wenn Sie ein „Gefällt mir“ abbrechen, ist isLike false , der Name des Übergangs ist gleich einer leeren Zeichenfolge und es erfolgt keine Animation.

Digitale Scroll-Animation

Da es sich lediglich um eine Zahlenänderung handelt, ist beim Übergang nur ein Div erforderlich. Achten Sie einfach darauf, den Schlüssel des Div festzulegen, um die Datenänderung anzuzeigen.

<div Klasse="wie-num-wrapper">
    <transition :name="item.is_like ? 'plus' : 'minus'">
        <div
                Klasse="like-num"
                :style="{color: item['is_like'] ? 'red': '#333'}"
                :Schlüssel="Artikel['like_num']"
        >
            {{item['like_num']}}
        </div>
    </Übergang>
</div>

  .wie-num-wrapper {
    Position: relativ;
    Rand links: 16px;
    Textausrichtung: Ende;
    Schriftgröße: 13px;
    Höhe: 17px;
    Überlauf-y: versteckt;

    .like-num {
      oben: 0;
      links: 0;
      Position: relativ;
      Zeilenhöhe: 17px;
    }
  }

Beachten Sie, dass wir die Höhe der Zahl auf 17px setzen müssen, um die Scrolldistanz nach oben und unten zu berechnen. Schreiben Sie als Nächstes die Übergangsanimationsklasse. Wir verwenden den Like-Status, um zu bestimmen, welche Animation verwendet werden soll. Der Name des Übergangs lautet plus , wenn auf „Gefällt mir“ geklickt wird, und minus wenn ein „Gefällt mir“ abgebrochen wird.

// Wie Nummer +1 animation.plus-enter-active, .plus-leave-active {
  Übergang: alle 0,3 s Einschwingen;
}

.plus-Eingabe, .plus-Verlassen {
  transformieren: übersetzenY(0);
}

.plus-eintreten-zu, .plus-verlassen-zu {
  transformieren: übersetzenY(-17px);
}

// Wie Nummer -1 animation.minus-enter-active, .minus-leave-active {
  Übergang: alle 0,3 s Einschwingen;
}

.minus-Eingabetaste {
  transformieren: übersetzenY(-34px);
}

.minus-enter-to {
  transformieren: übersetzenY(-17px);
}

.minus-verlassen {
  transformieren: übersetzenY(0);
}

.minus-verlassen-zu {
  transformieren: übersetzenY(17px);
}

Wie Animation

Die „Gefällt mir“-Animation ist sehr einfach. Wenn Sie auf die „Gefällt mir“-Schaltfläche klicken, wird unter dem alten digitalen Div ein neues digitales Div generiert. Verschieben Sie sie an diesem Punkt einfach alle um 17 Pixel nach oben.

Da beim Abbrechen eines „Gefällt mir“ die Zahlen von oben nach unten scrollen, muss die Startposition der Zahl 1 über 2 liegen. Schreiben Sie also den folgenden Code, um die Anfangsposition der Animation der Nummer 1 festzulegen

.minus-Eingabetaste {
  transformieren: übersetzenY(-34px);
}

Warum -34px? Da die Höhe des digitalen Divs 17 Pixel beträgt, überlappt es sich mit 2, wenn es um 17 Pixel nach oben verschoben wird. Wenn die Zahl 1 dann um weitere 17 Pixel nach oben verschoben wird, erscheint sie über 2. -17-17 = 34 geschah alles blitzschnell.

Als nächstes können Sie durch Verschieben auf -17px in .minus-enter-to den Effekt des Scrollens von 1 nach 2 erzielen.

Die Exit-Animation von Nummer 2 ist viel einfacher. Sie kann einfach von 0 bis 17 Pixel ausgerollt werden.

An diesem Punkt ist der gesamte Like-Effekt abgeschlossen

Oben sind die Einzelheiten des Beispiels für die Verwendung von Vue-Übergängen zum Erzielen eines ähnlichen Animationseffekts aufgeführt. Weitere Informationen zur Verwendung von Vue-Übergängen zum Erzielen eines ähnlichen Effekts finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!