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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue.js で v-for ループを使用して動的タグを生成する方法
  • Vue v-for ループを書く 7 つの方法
  • vue v-for ループ オブジェクトの属性
  • Vue ベースの円形スクロールリスト機能を実装する
  • Vue のループフォーム項目例の詳細な説明
  • この記事では、vue.jsのイベントループの仕組みを紹介します。

<<:  vuex ベースのショッピングカート機能の実装

>>:  Vuexはシンプルなショッピングカートを実装します

推薦する

JavaScript での HTML キャンバスとページ ストレージ テクノロジの使用に関する詳細な説明

目次1. JavaScriptはHTMLでキャンバスを使用する2. ページストレージ技術1. Jav...

JavaScript のクロージャによって発生する問題を回避する

閉鎖による問題を回避するためのletについてオブジェクト指向の考え方を使用して、購入者情報の削除機能...

曇り空のアイコン効果を実現する純粋な CSS

効果効果は以下のとおりです​実装のアイデアbox-shadow プロパティを使用して、複数の灰色の円...

vue-qr を使用して Vue の QR コードを生成する方法について深く理解する

目次npm ダウンロードステップ(1)輸入(2)vue-qrパラメータ例要約する「QRコード」の英語...

MySQLテーブルのフィールドと関連属性をエクスポートする手順

データベース内のテーブルのフィールドとプロパティをエクスポートし、テーブルを作成してWordに保存す...

VMWare ネットワーク アダプタの 3 つのモードの実装プロセスの分析

3つのモードブリッジ(ブリッジ モード)、NAT(ネットワーク アドレス変換モード)、ホストオンリー...

JavaScript 関数はランダムな色の検証コードをカプセル化します (完全なコード)

数字、文字、またはランダムな色の数字と文字の混合で構成される n 桁の確認コード。以下に完全なコード...

CSS 擬似要素::マーカーの詳細な説明

この記事では、CSS ::markerの興味深い疑似要素を紹介します。これを使用すると、テキスト番号...

mysql-8.0.16 winx64 最新インストール チュートリアル (画像とテキスト付き)

最近、データベースについて学び始めました。最初にやったことは、データベースとは何か、データベースとデ...

jsはショッピングカートの加算と減算、価格計算機能を実現します

この記事では、ショッピングカートの増減と価格計算を実現するためのjsの具体的なコードを紹介します。具...

vue N​​progress のプログレスバー機能を実装する際の一般的な問題

NProgress は、ページがジャンプしたときにブラウザの上部に表示される進行状況バーです。公式ウ...

React Nativeがシミュレータにリンクできない件について

React Native は、現在人気のオープンソース JavaScript ライブラリ React...

Vue で eslint 検出をオフにする方法 (複数の方法)

目次1. 問題の説明2. 問題解決1. 問題の説明Vue プロジェクトを開発する場合、作成時に誤って...

MySQLが中国語の文字を挿入する問題を永久に解決するコツを教えます

目次序文最初のステップ:ステップ2: このmy.iniを変更する要約する序文問題の説明:不正な文字列...

MySQL インデックス プッシュダウンの詳細

目次1. 左端接頭辞原則2. 表に戻る3. インデックスプッシュダウン序文:インデックス プッシュダ...