通知メッセージカルーセルを実装するための CSS3 トランジション

通知メッセージカルーセルを実装するための CSS3 トランジション

メッセージカルーセル効果

Vueバージョンをファイルにコピーして使用します

<テンプレート>
  <!-- カルーセルビュー-->
  <div id="カルーセルビュー">
    <!-- カルーセル リスト -->
    <ul id="カルーセルリストビュー" :class="{ 'カルーセルアニメーション':isAnimated }">
      <li v-for="(item, index) in dataSource" :key="index">{{ item }}</li>
    </ul>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  データ () {
    戻る {
      // アニメーションを開始 isAnimated: false,
      // カルーセルデータ dataSource: ['dzm', 'xyq', '啊啊']
    }
  },
  作成された(){
    // タイマーを開始します setInterval(this.scroll, 1000)
  },
  メソッド: {
    // スクロールアニメーション scroll () {
      // アニメーションを開始 this.isAnimated = true
      // カウントダウンアニメーション時間 setTimeout(() => {
        // 配列の最初の要素を配列の末尾に追加します this.dataSource.push(this.dataSource[0])
        // 配列の最初の要素を削除します this.dataSource.shift()
        // アニメーションをオフにする this.isAnimated = false
        // アニメーション時間は .carousel-animated で設定された時間と一致する必要があります}, 500)
    }
  }
}
</スクリプト>

<スタイルスコープ>
#カルーセルビュー {
  幅: 100%;
  高さ: 32px;
  背景色: 赤;
  オーバーフロー: 非表示;
}
#カルーセルリストビュー {
  マージン: 0;
  パディング: 0;
  リストスタイル: なし;
}
#カルーセルリストビュー li {
  行の高さ: 32px;
  高さ: 32px;
}
.carousel-animated {
  遷移: 0.5 秒を変換します。
  変換: translateY(-32px);
}
</スタイル>

CSS3 トランジションを使用して通知メッセージカルーセルを実装する方法についての記事はこれで終わりです。CSS3 トランジションカルーセルの詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  MySQL データベースの必須条件クエリ ステートメント

>>:  vue-nuxt ログイン認証の実装

推薦する

Web ページのソース ファイルを表示できない場合はどうすればよいですか?

Q: Outlook または IE のどちらを使用している場合でも、マウスを右クリックすると、ポッ...

DOCTYPE宣言の機能と使い方の詳しい説明

1. ブラウザのレンダリングモードとdoctype一部の Web ページは標準に従って作成されていま...

ドラッグ効果を実現するための純粋なCSSコード

目次1. ドラッグ効果の例2. CSS実装の原則3. CSS実装の詳細4. CSSレイアウト1. 固...

JavaScript でサウンド効果付きの花火効果を実装する

コードを書くのに 30 分かかりましたが、この HTML5 Canvas New Year Fire...

ネガティブマージン関数の紹介と使用方法の概要

1998 年の CSS2 勧告の時点で、テーブルは徐々に舞台から消え、歴史の中に記録されるようになり...

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

この記事では、macOSでのMySQL 8.0.16のインストールと設定のチュートリアルを参考までに...

2つのVirtualBox仮想ネットワークをブリッジするLinuxブリッジメソッドの手順

この記事は、この時期の「ピーターから奪ってポールに払う」という仕事のスタイルに対する私の不満から生ま...

CSS スタイルの導入方法とその長所と短所の紹介

CSSを導入する3つの方法1. インラインスタイル利点: 書きやすく、重みがある 欠点: 構造とスタ...

CSSファイルをインポートする3つの方法の詳細な説明

CSS を導入する方法には、インライン スタイル、内部スタイル シート、外部スタイル シートの 3 ...

トップに戻るボタンの例の JavaScript 実装

この記事では、トップに戻るボタンを実装するためのJavaScriptの具体的なコードを参考までに紹介...

CSSレイアウトにおけるフローティング問題に対する4つの解決策の詳細な説明

1. 原因:サブボックスをフロートに設定した後の効果: 青いボックスをフロートに設定すると、標準のド...

Linux での MySQL データベースのマスター スレーブ同期レプリケーション構成

Linux での MySQL データベースのマスター/スレーブ同期構成の利点は、この方法をバックアッ...

MySQL での重複キー更新時の replace into と insert into の使用法と相違点の分析

この記事では、MySQL での重複キー更新時の replace into と insert into...

TypeScript のユニオン型、交差型、型ガード

目次1. ユニオンタイプ2. クロスオーバータイプ3. 型保護3.1 カスタム型保護3.2 保護の種...

Ubuntu は、Mysql+Keepalived の高可用性実装 (デュアルアクティブ ホットスタンバイ) を構築します。

Mysql5.5 デュアルマシン ホットスタンバイ実装 2つのMySQLをインストールするMySQ...