CSS3を使用してプログレスバー効果を実現し、動的にパーセンテージを追加する

プロジェクト中、プログレスバーを実装するために js の requestAnimationFrame メソッドを使用し始めましたが、データが多い場合にパフォーマンスに大きな影響を与えたため、CSS を使用して実装し、最適化しました。

まずコードを貼り付けます:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>ドキュメント</title>
    <スタイル タイプ="text/css">
        *{マージン: 0;パディング: 0}
 
        .box{幅: 100px;高さ: 10px;境界線の半径: 10px;背景: #999;余白: 100px 自動;境界線: 1px 実線 #ff6780;}
        .child{位置: 相対;高さ: 100%;境界線の半径: 継承;}
 
        .process-animate{background: #ff6780;position: absolute;left: 0;top: 0;bottom: 0;border-radius:inherit;
            アニメーション: 1 秒の線形順方向処理;
        }
        @キーフレーム処理
        {
            0%{
                左:0;右:100%;
            }
            20%
                右:80%
            }
            40%
                右:60%;
            }
            60%{右:40%;}
            80%{右:20%;}
            100%{右:0;}
        }
	
    </スタイル>
</head>
<本文>
    <div class="box">
        <div class="child" style="width:50%"> // 子のパーセンテージはプログレスバーの割合です<p class="process-animate"></p>
        </div>
    </div>
</本文>
</html>

効果図 (動的効果を表示するにはコードをコピーします):

通常の状況では、パーセンテージは背景データに基づいて計算される必要があるため、動的に渡されます。Vueコードは以下に掲載されています。

プログレスバーのサブコンポーネント (progress.vue):

<テンプレート>
  <div class="プロセスラッパー" :class="{'addGray':addGray}">
    <div class="process-child" ref="processChild">
      <p class="process-animate" :class="{'addGray':addGray}"></p>
    </div>
  </div>
</テンプレート>
 
<スクリプト>
エクスポートデフォルト{
  小道具: {
    グレーを追加: {
      //グレー型: ブール値、
      デフォルト: false
    },
    進捗幅: {
      //進捗バーのパーセンテージタイプ: 数値、
      デフォルト: 0
    }
  },
  マウント() {
    this.$nextTick(() => {
      console.log(this.addGray, "addGray---");
      this.$refs.processChild.style.width = this.progressWidth + "%"; // 進行状況バーを動的に変更します // this.$refs.processChild.style.width = 90 + "%"; 効果をテストします});
  }
};
</スクリプト>
 
<style lang="scss" スコープ>
.プロセスラッパー{
  幅: 1.98rem;
  高さ: 0.13rem;
  マージン: 0.12rem 0 0.1rem 0;
  境界線の半径: 0.1rem;
  背景: #fff;
  境界線: 0.01rem 実線 #ff6780;
  &.addGray{
    背景: #999;
    境界線: 0.01rem 実線 #999;
  }
  .プロセス子 {
    位置: 相対的;
    高さ: 100%;
    // width: 100%; //この幅は動的に変化します。 border-radius: inherit を js 経由で変更します。
    .process-animate {
      背景: #ff6780;
      位置: 絶対;
      左: 0;
      上: 0;
      下部: 0;
      境界線の半径: 継承;
      アニメーション: 1 秒の線形順方向処理。
      &.addGray{
        背景: #999 !重要;
        // 境界線: 0.01rem 実線 #999;
      }
    }
  }
}
 
@keyframes プロセス {
  0% {
    左: 0;
    右: 100%;
  }
  20% {
    右: 80%;
  }
  40% {
    右: 60%;
  }
  60% {
    右: 40%;
  }
  80% {
    右: 20%;
  }
  100% {
    右: 0;
  }
}
</スタイル>

親コンポーネントの呼び出し:

<!-- 進捗状況バー -->
 <進行状況:addGray="非アクティブ":progressWidth="進行状況Width"></進行状況>

実際の効果をご覧ください:

以上、CSS を完璧に使用して、JS 再帰アニメーションのパフォーマンス消費を解決します。

CSS3 を使用してプログレスバー効果を実現し、動的にパーセンテージを追加する方法については、これで終わりです。CSS3 プログレスバーに動的パーセンテージコンテンツを追加する関連情報については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: Vue.js スタイルレイアウト Flutter ビジネス開発共通スキル

>>: HTML メタビューポート属性の詳細な説明