最近、小さなプログラムを開発しているときに、次の設計図のような円形のパーセンテージ進捗状況バーを実装する必要があることに気付きました。 初心者なので実装が難しいと感じたので、他の人のやり方を見るためにBaiduに行きましたが、満足のいくものは見つかりませんでした。静的な実装か、多くのDOM操作が必要でした。ミニプログラムで直接DOM操作を行うことは避けたほうがよいでしょう。 以下は、Vue コンポーネントの形式で作成した動的実装です。まずは効果図を示します。 効果実装手順円グラフを描く .pie { 表示: インラインブロック; 位置: 相対的; 幅: 150ピクセル; 高さ: 150px; 上マージン: 40px; 境界線の半径: 50%; 背景: #ccc; 背景画像: linear-gradient(右へ、透明度 50%、#4479FD 0); 色: 透明; テキスト配置: 中央; } 比例効果を実現する これは、疑似要素の遮蔽と動きを追加することで実現されます。コードは次のとおりです。 .pie::before { コンテンツ: ''; 位置: 絶対; 上: 0; 左: 50%; 幅: 50%; 高さ: 100%; 境界線の半径: 0 100% 100% 0 / 50%; 背景色: 継承; 変換の原点: 左; アニメーション: スピン 5 秒 線形無限、背景 10 秒 ステップ終了 無限。 } @keyframes スピン { に { transform: rotate(.5turn); } } @キーフレーム背景{ 50% { 背景: #4479FD; } } CSSアニメーション遅延プロパティの使用 上記のアニメーション時間をそれぞれ50、100に変更すると、対応する遅延秒数をanimation-delayに直接渡すことができます。たとえば、-60秒は60%で表示されます。 アニメーション再生状態: 一時停止; アニメーション遅延: -60秒; トーラス形状の実現 div内に直接配置されたdivを追加する <div class="pie"> <div class="pie-inner"> {{num}}% </div> </div> 一定速度のアニメーションを追加する startAnimate (ステップ、制限、速度) { タイムアウトを設定する(() => { // numはパーセンテージです if (this.num < limit) { this.num += ステップ this.startAnimate(ステップ、制限、速度) } それ以外 { this.num = 制限 } }、 スピード) } 計算プロパティをアニメーション遅延にバインドする 数値を対応する遅延秒数にリアルタイムで変換します 計算: { 遅れ () { `-${this.num}s` を返す } } 要約するこれまでのところ、動的な円形のパーセンテージ進捗バーは基本的に実現されていますが、まだ完璧ではありません。ご意見やご質問がございましたら、お気軽にお寄せください。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL コマンドラインモードアクセス操作 MySQL データベース操作
>>: Linux ディスク パーティションの実装の原理と方法の分析
この記事では、例を使用して、MySQL トランザクション、分離レベル、およびロックの使用について説明...
Iframe Web ページのナビゲーション ウィンドウに関する簡単な説明 Iframe ウェブペー...
(I)ウェブページのカラーマッチングの基本概念(1)白黒の言葉は永遠のテーマです。誰もそれを悪く言う...
今日は奇妙なネットワーク問題に遭遇しました。調査プロセスといくつかの構成状況を記録し、Linux で...
アイデア: 最初にランダムに並べ替えてからグループ化します。 1. テーブルを作成します。 テーブル...
1. まずリクエスト設定ファイルを見て、axios.createメソッドを見てください。baseUR...
1. 仮想化 vcenter に入り、ブラウザでログインし (クライアントは設定する場所を見つけませ...
docker イメージ ID は一意であり、イメージを物理的に識別できます。repository: ...
Vueドロップダウンリストの2つの実装最初の方法はv-forを使用する <el-select ...
付箋紙の壁シリーズを実現しようと思っています。シンプルなものはシンプル、複雑なものは多機能です。開発...
目次React Hooks に基づく状態共有の実装ユーザーエクスペリエンスこの記事では、主に Rea...
目次1. ループオブジェクト内の値2. ループオブジェクト3. キーと値のループ1. ループオブジェ...
最近、プロジェクトでは kubernetes (以下、k8s と表記、k と s の間には 8 つの...
目次序文1. データを抽出する2. エイリアス値3. 動的プロパティ4. オブジェクトの分解における...
この記事では、参考までに天気予報を実装するためのVueの具体的なコードを紹介します。具体的な内容は次...