カスタムプロパティを備えたCSSのタイマーバー

最近、プロジェクトに目に見えるタイマーを実装する必要がありますが、リファレンスとしてプロジェクトには、すでに同様のタイマーUIデザインがあります。ユーザーは数が減少するのを見る必要はありませんが、「バー」が徐々に完全から空に減少するのを見たいと思っています。 「タイマー」UIを実装する方法がたくさんあるため、これについて言及しました。この記事は、これらすべての方法についてではなく（Codepenの検索結果がより役立つでしょう）、むしろ私にとって非常にうまく機能するものについてです。

私が必要とするタイムのタイプは、プロジェクトの「ターンタイム」バーと呼ばれるものです。アクションを実行すると、回転時間がトリガーされる可能性があり、その後のほとんどのアクションは、ターン時間の終了までブロックされます。したがって、透明な赤いバータイマーが正しいUIの選択です。それは人々にリズムと流れの感覚を与え、あなたはタイマーの終了時間を「感じ」、次の操作をスケジュールすることができます。

このタイマーの設定は非常に簡単です...

将来、コンテナの空の部分をスタイリングする必要がある場合に備えて、親/子要素の構造を作成しましょう。

<div>
  <div></div>
</div>

今、私たちは内側のバーのスタイルだけです。

 .Round-Time-Bar Div {
  高さ：5px;
  背景：線形勾配（下部、赤、＃900）;
}

これにより、タイムインジケータとして使用できる素敵な赤いバーが提供されます。

次に、カウントダウンする必要がありますが、ここでは機能を考慮する必要があります。このようなタイマーは、どれくらいの時間がかかるかを知る必要があります！この情報をHTMLで直接提供できます。これは、JavaScriptの使用を避けるという意味ではありません - 私たちはそれを受け入れています。 「ねえ、JavaScript、期間変数を教えてください。残りを処理してください」と言っています。

<div style="--duration: 5;">
  <div></div>
</div>

実際、このアプローチは、JavaScriptを処理する最新のDOMに非常に適しています。 --variableが正しい限り、いつでもDOM要素を再レンダリングでき、設計がこの状況をうまく処理できることを確認できます。このようなバリエーションを作成します。

それでは、アニメーションを始めましょう。良いニュースは、簡単だということです。これは単一行のキーフレームです：

 @KeyFrames RoundTime {
  に {
    /*アニメーション「width」よりも効率的*/
    変換：Scalex（0）;
  }
}

水平にスケーリングしてもバーのスタイルが圧縮されていないため、バーを「圧縮」できます。これを行うと、幅をアニメーション化できます。これはそれほど大きな問題ではありません。特に、他のもののレイアウトが再調整されないためです。

次に、バーに適用します。

 .Round-Time-Bar Div {
  / * ... */
  アニメーション：RoundTime Calc（var（ -  duration） * 1s）ステップ（var（ - 持続時間））フォワード;
  変換オリジン：左中央。
}

--duration変数を使用してアニメーション期間を設定する方法をご覧ください。これはほとんどの作業を達成します。また、同じ数のsteps()を設定するために使用して、「グリッドごとにグリッド」を減少させます。 「Bid-by-Frame」はあなたが好きな視覚的なUI効果かもしれません（私は好きです）が、JavaScriptがいつでもこのバーを再レンダリングする可能性があるという考えにも適応し、Bid by-Frameで気づく可能性は低いです。整数を持続時間値として使用したため、このように使用できるようにしました。

ただし、スムーズなアニメーションが必要な場合は、これを行うことができます。

<div ...="" data-style="smooth"></div>

その後、 stepsを使用しないでください：

 .Round-Time-Bar [data-style = "smooth"] div {
  アニメーション：RoundTime Calc（var（ -  duration） * 1s）線形方向。
}

また、リニアアニメーションも使用していることに注意してください。これはタイマーにとって理にかなっているようです。それのように時間は緩和されません。それともそれは？とにかく、これはあなたの選択です。特定のポイントで加速または減速のように見えるタイマーが必要な場合は、それを求めてください。

同じdata-attributeベースのAPIを使用して、色の変更を実装できます。

 .round-time-bar [data-color = "blue"] div {
  背景：線形勾配（下部、＃64B5F6、＃1565C0）;
}

最後のバリアントは、各「秒」の幅を修正することです。このようにして、10秒のタイマーは5秒のタイマーよりも長く見えます。

 .Round-Time-Bar [data-style = "sixed"] div {
  幅：calc（var（ -  duration） * 5％）;
}

これがデモンストレーションです：

CSSアニメーションを再起動するためのヒントに注意してください。

ああ、ところで、私はそれがあることを知っています<meter></meter>要素、それはよりセマンティックかもしれませんが、それ自体のUIは私がここで望むようにアニメーション化することはできません - 少なくともそれと戦うことはできません。しかし、それがもっとアクセスしやすいかどうかはわかりませんか？現在の価値を有用な方法で宣言していますか？ JavaScriptを使用してリアルタイムで更新する場合<meter></meter>、よりアクセスしやすいタイマーでしょうか？誰かが知っているなら、私はここで解決策をリンクできます。

以上がカスタムプロパティを備えたCSSのタイマーバーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。