Vue でシンプルな無限ループスクロールアニメーションを実装する例

この記事では主に、Vue でシンプルな無限ループスクロールアニメーションを実装し、みんなで共有する例を紹介します。詳細は次のとおりです。

まず実装効果を見てみましょう:

このようなカルーセルのような効果は通常、カルーセルソリューションを使用して解決できますが、ここで紹介するソリューションと比較すると、カルーセルの実装は依然として複雑です。
Vue はトランジションアニメーション transition-group を提供しており、ここで使用している効果はこれです。

// テンプレート
<トランジショングループ名="リスト完了" タグ="div">
 <div
  v-for="項目内のv"
  :key="v.ix"
  class="item list-complete-item プロパネル"
  :style="{ 高さ: sh }"
 >
  //コンテンツ部分</div>
</トランジショングループ>

// SCSS で
.リスト完了項目 {
 遷移: すべて 1;
}
.list-complete-leave-to {
 不透明度: 0;
 変換: translateY(-80px);
}
.list-complete-leave-active {
 位置: 絶対;
}

このようにアニメーション効果は出ますが、自動では実行できないのでsetIntervalを使います。

マウント() {
 カウントを4000にする
 if (!this.timer) {
  this.timer = setInterval(() => {
   （this.items.length > 1）の場合{
    this.remove()
    this.$nextTick().then(() => {
     これを追加します()
    })
   }
  }, カウント)
 }
},
メソッド: {
 追加: 関数() {
  if (this.items && this.items.length) {
   const 項目 = { ...this.removeitem[0] }
   アイテム.ix = this.nextNum++
   this.items.push(アイテム)
  }
 },
 削除: 関数() {
  this.removeitem = this.items.splice(0, 1)
 }
}

たとえば、効果を達成するのが簡単になります。ちなみに、ここで実現した効果は、ニュースのスクロールと同じように 1 行スクロールなので、ビューウィンドウには 1 つのデータしか表示されません。このように制限しない場合は、リスト全体を表示できますが、そのたびに 1 つのデータだけが消えます。

PS: この方法は画像の動的レンダリングに使用できます

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

もちろん、異なる意見がある場合は、メッセージを残してコミュニケーションをとってください！

これで、Vue でシンプルな無限ループスクロールアニメーションを実装する例についての記事は終了です。Vue 無限スクロールアニメーションの関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: