CSSスイッチケース条件

CSSには、@Mediaクエリの特定の性質とCSSカスタムプロパティを使用した深い策略を除いて、まだスイッチルールまたは条件付きの場合はまだありません。私たちがやった場合にそれが役立つ理由を見てみましょう。そして、それをやってのけるために今日使用できるトリックを見てみましょう。

可能性についての最近のおしゃべり

これらのことは今日は使用できませんが、昨年、一般的な条件付きCSSの概念について多くのチャットがありました。

• ブライアン・カーデルは、Switch（）ステートメントとタブAtkins Riffを提案しました。
• Jonathan Nealは、非常に多くの会話を引き起こした条件付き値のメディアクエリのバリエーションを提案しました。
• Lea Verouは、「より高いレベルのカスタムプロパティ」を提案しました（Bramus Van Dammeの見方をしています）。

だから、はい。条件付きCSSの需要があります。

条件付きCSSが役立つ理由を想像してください

おそらく、一定量のスクロール後の視覚的な変化。数値入力後の視覚的変化は、特定の範囲内にあります。少数の状態を持つコンポーネント。

基本的に状態に基づいてUIを構築するためのUI（例：React、Vueなど）には、非常に人気のあるJavaScriptライブラリのジャンル全体があります。明らかに、これは開発者のニーズです。その状態ベースのスタイリングをCSSに移動できれば、それはすべて私たちが必要とするかもしれないJavaScriptが少なく、そしておそらく懸念のより良い分離でしょう。

共通のテーマ

すでにCSSにカスタムプロパティがあり、それらの状態変化ロジックを基にして、特定の値に変更されるカスタムプロパティの副作用としてスタイルのブロックを変更することができます。

すでにスタイルのブロックを変更するメカニズムがあることは事実です。 JavaScriptを介してクラスを変更することができ、そのクラスはCSSで好きなものを適用できます。しかし、それはCSSの状態ベースのスタイリングが役に立たないという意味ではありません。私たちは常にこの能力を持っているとは限らないか、このためにJavaScriptを書きたくないかもしれませんし、代わりにカスタムプロパティを他の方法（メディアクエリ、HTMLの変更など）で変更します。 CSSでそれを行うということは、ビジネスロジックとビジュアルスタイルのロジックを個別に支援することを意味します。

トリック！状態に@keyFramesを使用します

CSS @KeyFramesを使用して、特定の変更を切り替えることができます。アニメーションプロパティのパワーを通じて、表示するフレームを正確に選択し、そのフレームに正確に一時停止する可能性が開き、スイッチケースステートメントまたは状態ベースのスタイルを効果的に模倣します。

Animation-Delayプロパティで遊んで、これを見てみましょう。

これがそのペンで起こっていることです：

• アニメーション遅延：負の遅延値により、特定のフレーム（またはその間）が有効になります（正の値はそのように機能しません）。このトリックを使用して状態を強制します。
• アニメーションプレイステート：一時停止：実際には何もアニメーションではないので、アニメーションは一時停止します。
• アニメーション期間：実際の期間は問題ではなく、単に必要なので、異なるキーフレームを保持する時間があります。 100.001Sのような値にして、100秒遅れている場合、最後のキーフレームが引き続き機能するようにします。期間は遅延値より長くする必要があります。

最初の範囲入力は、-100と0の範囲のアニメーション遅延を変更します。

現実世界のユースケース

作業例にまっすぐジャンプする前に、このトリックをより詳細に議論する価値があります。

まず、トリックは数値でのみ機能します。したがって、数学を厳密に実行しているため、色の値や文字列。

第二に、ブールのトリックがあります。変数-value：10は0〜100の間の任意の数値を取ることができます。値が5を超える場合は色を適用したいのです。そして、たとえ私たちが知っていても、それは実際に私たちをどのように助けてくれるのでしょうか？

 -is-above-5：クランプ（0、var（ -  value）-5、1）

clamp（）は、よりスマートなcalc（）のようなものです。これにより、理想的な値を宣言しながら、計算された値を範囲に厳密に制限することができます。その範囲は、ブール変数を達成するために必要なすべてです。

Clamp（）の2番目のパラメーターに数学を記述すると、出力0（以下）または1（または1以上）のいずれかになります。 0から1の数になる可能性のある数学を書かないようにしてください。

これがどのように機能するかです：

Range Inputの唯一のジョブは、Value、 - min、および-maxの値を定義し、OnInputイベントを使用して値を変更することにより、その値を「ブロードキャスト」することです。これは、CSSで状態のような動作を得ることができる最も最小限のことです。 JavaScriptは必要ありません。

CSS数学関数を使用すると、同じ変数から進行状況バーの「完了」割合を推測することができます。

 -completed：calc（（var（ -  value） -  var（ -  min）） /（var（ -  max） -  var（ -  min）） * 100）;

さて、私たちは価値が特定の割合を超えているかどうかを知っています。

 -30オーバー：クランプ（0、var（ - 完了）-30、1）;
-70オーバー：クランプ（0、var（ - 完了）-70、1）;
/* ...等々... */

わかりました、素晴らしいですが、これを使用して特定のキーフレームを選択するにはどうすればよいですか？ max（）関数を使用して：

 - フレーム：マックス（ 
    calc（1-var（ -  over-30））、 
    var（ -  30） * 2、 
    var（ -  70以上） * 3 
    var（-is-100） * 4 
）;

CSSブール人を使用しているのは、それらを使用して特定の目標を達成するために多くの方法があり、創造的で読みやすいフォーミュラを見つけなければならないことです。

上記のフォーミュラでは、ブール値の値が1にある場合、ブール人はフレーム番号を「切り替え」ます。最大関数を使用しているため、最大の切り替えされたフレーム番号は - フレームの計算値になります。

色の変化にはわずかな遷移があることに注意してください。 currentcolor：currentcolorでこれを行うことができました。親から色を継承する塗りつぶし領域では、CSS Houdiniを使用して、そのタイプを宣言して遷移をCSS変数に割り当てる力を説明することを選択しました。

使用済みのCSSブールトリックの例は、以下のペンで表示できます。これは、幅広いカスタマイズを可能にする多くの変数を備えたCSSのみのコンポーネントです。

この小さなトリックには他にも多くのユースケースがあり、コミュニティの創造性によって他に何が達成されるかを見ることに興奮しています。

以上がCSSスイッチケース条件の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。