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をインストールする方法

推薦する

Mysql の主キーと一意キーの違いのまとめ

主キーとは何ですか?主キーは、テーブル内の各タプル (行) を一意に識別するテーブル内の列です。主キ...

CentOS7にMariaDB 10.2.4をインストールする方法の詳細な説明

CentOS 6 以前のバージョンでは、MySQL サーバー/クライアント インストール パッケージ...

Flex プログラム Firefox で中国語を入力すると文字化けするバグ

Firefox の下位バージョンでは中国語の文字を入力できず、上位バージョンでは文字化けした文字が表...

CentOS8.0 で FTP サーバーをインストールして設定する方法

CentOS8.0-1905 のリリース後、FTP サーバーを CentOS の新しいバージョンに移...

MySQL ページングパフォーマンスの調査

一般的なページング方法: 1. エスカレーター方式エスカレーター方式では通常、前のページ/次のページ...

JavaScriptはパスワードボックスの検証情報を実装します

この記事では、パスワードボックスの検証情報を実装するためのJavaScriptの具体的なコードを例と...

scss で mixin が動作しない問題の解決方法 (ブラウザでコンパイルできない)

ミックスインメソッド: ブラウザはコンパイルできません: 以前のバージョンのsassでは上記の記述方...

Linux ファイルを分割するための split コマンドの詳細な説明

いくつかの簡単な Linux コマンドを使用すると、ストレージまたは電子メールの添付ファイルのサイズ...

HTML でよく使われるタグの概要 (必読)

コンテンツ詳細タグ: <h1>~<h6>タイトルタグ<pre>テ...

HTMLタグと基本要素の学習のまとめ

1. HTML の要素とタグ<br />要素は、1 つのタグまたは 1 組のタグによって...

CSS3を使用してボタンホバーフラッシュダイナミック特殊効果コードを実装する

CSS3 の列シリーズ属性を使用してウォーターフォールレイアウトを作成する方法を紹介しました。興味の...

簡潔なReactコンポーネントを書くためのヒント

目次スプレッド演算子を使用してプロパティを渡すのは避けてください関数パラメータをオブジェクトにカプセ...

Ubuntu 20.04にROS Noeticをインストールする方法

免責事項:プロジェクトでは ROS 環境を使用する必要があるため、これは Ubuntu 20.04 ...

CSSプリコンパイル言語とその違いの詳細な説明

1. 何ですか マークアップ言語として、CSSは比較的シンプルな構文とユーザーに対する要件が低いが、...

MySQLデータベースの基礎知識と操作のまとめ

この記事では、例を使用して、MySQL データベースの基本的な知識と操作について説明します。ご参考ま...