CSS开关案例条件

如果除了@Media查询的特定性质以及具有CSS自定义属性的一些深度欺骗之外，CSS尚未具有开关规则或条件。让我们看一下为什么这样做的话为什么会有用，看看今天可以使用它的技巧。

最近关于这种可能性的chat不休

尽管今天这些事情都不可用，但在去年，关于通用有条件CSS的概念的聊天很多：

• 布莱恩·卡尔德尔（Brian Kardell）在上面提出了一个Switch（）语句和Atkins Riff。
• 乔纳森·尼尔（Jonathan Neal）提出了有关条件价值的媒体查询变化，这引发了很多对话。
• Lea Verou提出了“更高级别的自定义属性”（这是Bramus van Damme的观察），这似乎非常有用。

所以，是的。有条件的CSS的需求在那里。

想象为什么有条件的CSS有用

一定量的滚动后，也许是视觉上的变化。数字输入后的视觉更改在一定范围内。具有少数状态的组成部分。

有一个非常流行的UI的JavaScript库（例如React，Vue等）的整个类型，这些库基本上用于基于状态的UI。显然，这是开发人员的需求。如果我们能够将基于州的样式移至CSS，那就是我们可能需要的JavaScript，也许可以更好地分开关注点。

一个共同的主题

我们已经在CSS中具有自定义属性，并且可以将状态变化的逻辑基于它们，从而将样式块作为自定义属性更改为某些值的副作用。

的确，我们已经有了改变样式块的机制。我们可以通过JavaScript更改课程，并且该类可以应用CSS中的任何内容。但这并不意味着CSS中的基于州的样式不会有用。我们并不总是具有或可能不想为此编写任何JavaScript，而是以其他方式更改自定义属性（例如媒体查询，HTML更改等）。在CSS中进行此操作意味着帮助分开业务逻辑和视觉样式逻辑。

一个把戏！使用@keyframes进行状态

CSS @KeyFrames可用于切换特定的更改。通过动画属性的力量，有可能确切地选择要显示哪个帧并在该框架上暂停，从而有效地模仿开关语句或基于状态的样式。

让我们通过使用动画播放属性来查看这一点：

这是那支笔的发生：

• 动画延迟：负延迟值迫使特定的帧（或之间）生效（正值不起作用）。我们将使用此技巧来强迫状态。
• 动画播放状态：暂停：我们实际上并没有为任何动画动画，因此动画会暂停。
• 动画效果：实际持续时间无关紧要，它只需要一个，因此有一个时间跨度可以容纳不同的密钥帧。我们将使其成为100.001之类的值，以便如果我们延迟100秒，最后一个密钥帧仍将起作用。持续时间需要长于延迟值。

第一个范围输入修改了-100和0范围之间的动画 - 延迟。

现实世界中的用例

在我们直接进入工作示例之前，值得更详细地讨论此技巧，因为您应该知道一些细微差别。

首先，技巧仅适用于数字值。因此，颜色值或字符串是因为它严格执行数学。

其次，这是布尔的技巧。考虑一个变量 - 值：10，它可以在0到100之间进行任何数字值。如果值高于5，我们想应用颜色。我们如何知道该值是以下还是低于5？即使我们知道，这对我们有什么帮助实际帮助我们？

 -is-above-5：夹具（0，var（ -  value）-5，1）

clamp（）就像一个智能的calc（），因为它允许我们严格地将计算值限制在范围内，同时声明理想值。该范围就是实现布尔变量所需的一切。

在夹具（）的第二个参数中写入任何数学，然后输出0（或以下）或1（或更高）。确保不要写任何可能导致数字在0到1之间的数学。

这是这样做的方法：

范围输入的唯一工作是通过定义-Min和-max的值来“广播”其值，然后使用ONINTUT事件修改-Value。这是可以完成的最小的事情，可以在CSS中获得类似状态的行为。不需要JavaScript。

使用CSS数学功能，可以从相同变量中推断出进度栏的“完成”百分比：

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

现在，我们知道该价值是否超过一定百分比，这为我们提供了另一种按国家进行更改的方法：

 -over-30：夹具（0，var（ - 完成）-30，1）;
-over-70：夹具（0，var（ - 已完成）-70，1）;
/* ...等等... */

好的，太好了，但是我们如何使用它来选择特定的密钥帧？通过使用max（）函数：

 - 框架：max（ 
    计算（1-var（ - 超过30））， 
    var（ - 超过30） * 2， 
    var（ -  70） * 3， 
    var（-is-100） * 4 
）；

CSS布尔人的目的是，有许多方法可以使用它们来实现某个目标，并且必须发挥创造力，找到一个简短且可读性的公式。

在上面的公式中，如果布尔值的值为1，则布尔值将“切换”帧号。由于我们使用的是最大函数，因此最大的切换帧号将是-frame的计算值。

请注意，颜色变化有轻微的过渡。我们本可以在背景下做到这一点：CurrentColor；在填充区域（从父母那里继承颜色），但我选择使用CSS Houdini来说明通过声明其类型将过渡分配给CSS变量的力量。

可以在下面的笔中查看严重的CSS布尔特技巧的一个示例，这是一个仅CSS的组件，其中有很多变量允许广泛的自定义：

我敢肯定，这个小技巧还有许多其他用例，很高兴看到社区的创造力还能实现什么。

以上是CSS开关案例条件的详细内容。更多信息请关注PHP中文网其他相关文章！