Vue 手書き読み込みアニメーション プロジェクト

Vue 手書き読み込みアニメーション プロジェクト

ページが応答しない場合、白い画面が表示されないように、読み込みアニメーションを表示するのがユーザーフレンドリーなパフォーマンスです。応答コンテンツがページにレンダリングされると、アニメーションは削除されます。

まずローディング効果の写真を載せます

原理:擬似クラス+アニメーション。以下はステップバイステップの図で、理解を助けるために掲載されています。ローディングアニメーションの本質は、幅と高さが固定された正方形を設定し、border-radius: 50%; で円形にし、divに3pxの境界線を付けて透明に設定し、上部の境界線を個別に白に設定し、::beforeと::after擬似クラスabsoluteを使用して配置し、同じ設定を行うことです。違いは、左のギャップを順番に増やし、アニメーションの実行時間が長くなり、遅延が設定されることで、円が異なる速度で回転できるようになります。

完全なコード:

コンポーネントフォルダ内のloading.vue

<テンプレート>
  <div id="loader_wrapper">
    <div id="loader"></div>
    <div class="load_title">読み込み中、お待ちください......</div>
  </div>
</テンプレート>
<スクリプト>
  エクスポートデフォルト{
      名前:"読み込み中",
  }
</スクリプト>
<スタイルスコープ>
#ローダーラッパー{
  位置: 固定;
  上: 0;
  左: 0;
  幅: 100%;
  高さ: 100%;
  zインデックス: 99;
  背景: rgba(0, 0, 0,.8);
  背景サイズ: 100% 100%;
}
#ローダ{
  表示: ブロック;
  位置: 相対的;
  左: 50%;
  上位: 50%;
  幅: 300ピクセル;
  高さ: 300px;
  /* 背景: 赤; */
  マージン: -150px 0 0 -150px;
  境界線の半径: 50%;
  境界線: 3px 透明実線;
  上の境界線の色: #fff;
  -webkit-animation: 5 秒間直線的に無限にスピンします。
  -ms-animation: 5秒間直線的に無限スピン;
  -moz-animation: スピン 5 秒 線形 無限;
  -o-animation : 5秒間、直線的に無限回転します。
  アニメーション:スピン 5 秒 線形 無限;
  zインデックス: 1001;
}
#ローダー:前{
  コンテンツ:"";
  位置: 絶対;
  上: 5px;
  左: 5px;
  右: 5px;
  下: 5px;
  境界線の半径: 50%;
  /* 背景: 緑; */
  境界線: 3px 透明実線;
  上の境界線の色: #fff;
   -webkit-animation: スピン 8 秒 線形 無限;
  -ms-animation: 8 秒間直線的に無限スピンします。
  -moz-animation: スピン 8 秒 線形 無限;
  -o-animation : 8秒間線形無限スピン;
  アニメーション:スピン 8 秒 線形 無限;
}
#ローダー:後{
  コンテンツ:"";
  位置: 絶対;
  上: 15px;
  左: 15px;
  右: 15px;
  下: 15px;
  境界線の半径: 50%;
  /* 背景: 黄色; */
  境界線: 3px 透明実線;
  上の境界線の色: #fff;
   -webkit-animation: スピン 8 秒、線形 1 秒、無限;
  -ms-animation: スピン 8 秒、線形 1 秒、無限;
  -moz-animation: スピン 8 秒、線形 1 秒、無限;
  -o-animation : スピン 8 秒、線形 1 秒、無限;
  アニメーション:スピン 8 秒 線形 1 秒 無限;
}
@-webkit-keyframes スピン {
  0%{
    -webkit-transform: 回転(0度);
    -ms-transform:回転(0度);
    変換:回転(0度);
  }
  100%{
    -webkit-transform: 回転(360度)。
    -ms-transform:回転(360度);
    変換: 回転(360度);
  }
}
 
@keyframes スピン{
  0%{
    -webkit-transform: 回転(0度);
    -ms-transform:回転(0度);
    変換:回転(0度);
  }
  100%{
    -webkit-transform: 回転(360度)。
    -ms-transform:回転(360度);
    変換: 回転(360度);
  }
}
#loader_wrapper .load_title{
  フォントファミリ: "Open Sans";
  色:#fff;
  フォントサイズ: .3rem;
  幅: 100%;
  テキスト配置: 中央;
  zインデックス: 9999;
  位置: 絶対;
  上位:70%
  不透明度: 1;
  行の高さ: .3rem;
}
</スタイル>

cs.vueページで読み込みを導入して登録する

csvue の

<テンプレート>
  <div class="main">
    <v-if="!initFlag" をロード中></ロード中>
    111
  </div>
</テンプレート>
 
<スクリプト>
  「../components/loading」からロードをインポートします。
  エクスポートデフォルト{
    名前:"トランニン",
    データ () {
      戻る {
        initFlag:false, // グローバル データを初期化する要求 false は要求が失敗したことを意味します}
      
    },
    コンポーネント:{
      読み込み中、
    }
  }
</スクリプト>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue のトランジション効果とアニメーショントランジションの使用例の詳細な説明
  • Vue でのトランジションアニメーション効果の適用の詳細な説明
  • Vue 学習ノート 上級章 単一要素遷移
  • Vueはカルーセルアニメーションを実装します
  • Vueのトランジションとアニメーションの深い理解

<<:  HTML フォームタグチュートリアル (2):

>>:  Dockerを使用してJenkinsをインストールする方法

推薦する

VUE+SpringBootはページング機能を実装します

この記事では主に、Vue + SpringBoot でページ分割されたリストデータを実装する方法を紹...

Webpack5-react スキャフォールディングをゼロから構築するための実装手順 (ソースコード付き)

目次ウェブパック5公式スタート建築ガイド構築を開始する依存する準備が完了したら、プロジェクトの構築を...

Docker のポート解放失敗の解決策

今日、非常に奇妙な状況に遭遇しました。docker イメージを更新した後、docker-compos...

el-table ヘッダーでテキストを折り返す 3 つの方法の詳細な説明

目次問題の説明レンダリング3種類のコード要約する問題の説明通常、表のヘッダーは折り返されませんが、ビ...

Linux で特定の時間にコマンドを実行する方法

先日、rsync を使用して LAN 上の別のシステムに大きなファイルを転送していました。非常に大き...

CSS で透明なグラデーション効果を実装するためのサンプルコード

Zhihu Discovery コラムのタイトル画像は、通常、以下のように表示されます。明らかに、グ...

HTML 9グリッドレイアウトの実装方法

ウェブサイトのレイアウトの多様化は、当社のフロントエンドの得意分野です。最近、UC ブラウザのデフォ...

IDEA が MySQL データベースに接続できない問題の 6 つの解決策

この記事では、IDEA が MySQL データベースに接続できない問題に対する 6 つの解決策を主に...

ローカル yum ソースの設定、国内 yum ソースの設定、epel ソースの設定を行う Linux の手順

1. ローカルyumソースを設定する1. ISOイメージをマウントする マウント -o loop /...

MySQL データベースのパフォーマンス最適化の概要

目次なぜ最適化するのですか? ?どこから始めますか? ?解決策は何ですか? ? ?どうやって選ぶ? ...

Centos7 サーバーで jar パッケージ プロジェクトを開始する最良の方法

序文Linux 上で jar パッケージを実行する方法は誰もが知っています。なぜ別々に話したいのでし...

axios を使用してプロジェクト内の複数の繰り返しリクエストをフィルタリングする方法

目次1. はじめに:この場合、通常は 2 つのアプローチがあります。 2. CancelToken ...

Centos7.X Linux システムに tomcat8 をインストールするためのグラフィック チュートリアル

1. Tomcatのインストールパスを作成する mkdir /usr/local/tomcat 2....

Vueは水平の斜めの棒グラフを実装します

この記事では、水平傾斜棒グラフを実装するためのVueの具体的なコードを参考までに共有します。具体的な...

MySQL で絵文字表現を挿入できない理由と解決策

失敗のシナリオMySQL データベースに絵文字表現を挿入するために JDBC を呼び出すと、例外ja...