Ein Beispiel für die Implementierung einer einfachen Endlosschleifen-Scrolling-Animation in Vue

Dieser Artikel stellt hauptsächlich ein Beispiel für die Implementierung einer einfachen Endlosschleifen-Scrolling-Animation durch Vue vor, das mit allen geteilt wird. Die Einzelheiten sind wie folgt:

Schauen Sie sich zunächst den Implementierungseffekt an:

Diese Art von Karusselleffekt kann normalerweise mit einer Karusselllösung behoben werden, aber im Vergleich zu der Lösung, die ich vorstellen werde, ist die Karussellimplementierung noch komplizierter.
Vue stellt eine Übergangsanimation mit der Bezeichnung „Transition-Group“ bereit. Dies ist der Effekt, den ich hier verwende.

// Vorlage
<transition-group name="Liste vollständig" tag="div">
 <div
  v-for="v in Elementen"
  :Schlüssel="v.ix"
  Klasse = "Artikelliste-komplett-Artikel Pro-Panel"
  :style="{ Höhe: sh }"
 >
  //Inhaltsteil</div>
</Übergangsgruppe>

// scss
.Liste-vollständiges-Element {
 Übergang: alles 1en;
}
.Liste-abgeschlossen-verlassen-zu {
 Deckkraft: 0;
 transformieren: übersetzenY(-80px);
}
.Liste-abgeschlossen-aktiv-lassen {
 Position: absolut;
}

Auf diese Weise wird der Animationseffekt erzielt, er kann jedoch nicht automatisch ausgeführt werden. Daher verwende ich setInterval:

montiert() {
 lass count = 4000
 wenn (!dieser.timer) {
  dieser.timer = setzeInterval(() => {
   wenn (this.items.length > 1) {
    dies.entfernen()
    dies.$nextTick().then(() => {
     dies.hinzufügen()
    })
   }
  }, zählen)
 }
},
Methoden: {
 hinzufügen: function() {
  wenn (diese.Artikel && diese.Artikellänge) {
   const item = { ...this.removeitem[0] }
   item.ix = diese.nächsteNummer++
   this.items.push(Artikel)
  }
 },
 entfernen: function() {
  dies.removeitem = dies.items.splice(0, 1)
 }
}

Beispielsweise wäre es einfacher, den Effekt zu erzielen. Übrigens ist der Effekt, den ich hier erzielt habe, ein einzeiliges Scrollen, genau wie beim Scrollen von Nachrichten, sodass das Ansichtsfenster nur ein Datenelement anzeigen kann. Sie können es auch nicht auf diese Weise einschränken. Dann kann die gesamte Liste angezeigt werden, aber jedes Mal verschwindet nur ein einzelnes Datenelement.

PS: Diese Methode kann zum dynamischen Rendern von Bildern verwendet werden

<Bild
 :src="erfordert(`@/assets/imgs/icons/${somevar}.png`)"
>

Wenn Sie anderer Meinung sind, hinterlassen Sie uns bitte eine Nachricht, damit wir Ihnen dies mitteilen können!

Damit ist dieser Artikel über ein Beispiel für die Implementierung einer einfachen Endlos-Scrolling-Animation mit Vue abgeschlossen. Weitere verwandte Inhalte zu Vue-Endlos-Scrolling-Animationen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!