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はシンプルなショッピングカートを実装します

推薦する

MySQL トランザクションの詳細

目次導入取引の4つの特徴トランザクション分離レベル確認するMVCC現在の読書スナップショット読み取り...

MySQL 5.7.21 解凍版のインストールと設定方法のグラフィックチュートリアル (win10)

MySQL 5.7.21 解凍版のインストールと設定方法は参考までに。具体的な内容は以下のとおりで...

MySQL 5.7.17 winx64 のインストールと設定のグラフィックチュートリアル

MySQL のインストールに関する以前のメモを要約して、皆さんと共有しました。ステップ 1: mys...

Linux で SSH サーバー エイリアスを作成する 2 つの方法

序文SSH 経由でさまざまなリモート システムに頻繁にアクセスする場合は、このトリックを使用すると時...

初心者でもjsのtypeofとinstanceofの違いを理解できます

目次1. 型2. インスタンス3. 違い1. 型typeof 演算子は、評価されていないオペランドの...

MySQL のタイムスタンプと日付時刻のタイムゾーンの問題によって生じる DTS の落とし穴の詳細な説明

目次MySQL で現在の時刻を表現するにはどうすればよいでしょうか?結論は確認するピットMySQL ...

Ubuntu 18.04 に mysql5.7.23 をインストールするチュートリアル

この記事では、Ubuntu18.04にmysql5.7.23をインストールする具体的な方法を参考まで...

HTML テーブル タグ チュートリアル (47): ネストされたテーブル

<br />このページでは、テーブルをネストすることで組版を実現しています。つまり、1 ...

Vue3 (パート 2) Ant Design Vue の統合

目次1. Ant Design Vueを統合する2. コンポーネントの使用1. 完全な引用2. コン...

Vue.jsはコンポーネントを通じてアイコンを処理します

アイコン処理ソリューションこの記録の目的は、element-plus 以外のアイコンをコンポーネント...

JavaScript でオブザーバー パターンを実装する方法

目次概要オブザーバーパターンの応用シナリオオブザーバーパターンの実装要約する概要オブザーバー パター...

IDEA2021 tomcat10 サーブレットの新しいバージョンの落とし穴

私が学習していたときに使用していたバージョンは比較的新しいものであり、インターネット上のチュートリア...

XHTML 特殊文字コレクション

注意&#160;ノーブレークスペース = ノーブレークスペース、 iexcl ¡ &...

擬似分散グラフィックを実現するための VMware 構成 Hadoop チュートリアル

1. 実験環境シリアルナンバープロジェクトソフトウェアとバージョン1オペレーティング·システムCen...

HTML テーブル マークアップ チュートリアル (18): テーブル ヘッダー

<br />ヘッダーはテーブルの最初の行を参照します。ヘッダー内のテキストは中央揃えで太...