この記事では主に、Vue でシンプルな無限ループスクロールアニメーションを実装し、みんなで共有する例を紹介します。詳細は次のとおりです。 まず実装効果を見てみましょう: このようなカルーセルのような効果は通常、カルーセル ソリューションを使用して解決できますが、ここで紹介するソリューションと比較すると、カルーセルの実装は依然として複雑です。 // テンプレート <トランジショングループ名="リスト完了" タグ="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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
目次1. JavaScriptはHTMLでキャンバスを使用する2. ページストレージ技術1. Jav...
閉鎖による問題を回避するためのletについてオブジェクト指向の考え方を使用して、購入者情報の削除機能...
効果効果は以下のとおりです実装のアイデアbox-shadow プロパティを使用して、複数の灰色の円...
目次npm ダウンロードステップ(1)輸入(2)vue-qrパラメータ例要約する「QRコード」の英語...
データベース内のテーブルのフィールドとプロパティをエクスポートし、テーブルを作成してWordに保存す...
3つのモードブリッジ(ブリッジ モード)、NAT(ネットワーク アドレス変換モード)、ホストオンリー...
数字、文字、またはランダムな色の数字と文字の混合で構成される n 桁の確認コード。以下に完全なコード...
この記事では、CSS ::markerの興味深い疑似要素を紹介します。これを使用すると、テキスト番号...
最近、データベースについて学び始めました。最初にやったことは、データベースとは何か、データベースとデ...
この記事では、ショッピングカートの増減と価格計算を実現するためのjsの具体的なコードを紹介します。具...
NProgress は、ページがジャンプしたときにブラウザの上部に表示される進行状況バーです。公式ウ...
React Native は、現在人気のオープンソース JavaScript ライブラリ React...
目次1. 問題の説明2. 問題解決1. 問題の説明Vue プロジェクトを開発する場合、作成時に誤って...
目次序文最初のステップ:ステップ2: このmy.iniを変更する要約する序文問題の説明:不正な文字列...
目次1. 左端接頭辞原則2. 表に戻る3. インデックスプッシュダウン序文:インデックス プッシュダ...