1. 首页
  2. css

CSS开关盒条件

CSS还没有一个switch规则或条件if,除了@media查询的特殊性质和CSS自定义属性的一些深层次技巧之外。让我们来看看如果我们这么做了为什么它会有用,看看今天可以用来实现它的一个技巧,就在去年,人们就通用条件CSS的概念进行了大量的讨论:
– 布瑞恩Kardell提出了一个switch()语句,Tab Atkins riff对此进行了讨论。

– Jonathan Neal提出了一个条件值的媒体查询变体,引发了大量的讨论。

– leaverou提出了\”更高层次自定义属性(这里是Bramus Van Damme的一个视图),它看起来非常有用。
所以,是的。有条件CSS的需求。
h3。数字输入在一定范围内后的视觉变化。一个有几个状态的组件。
有一整套非常流行的用于UI的JavaScript库(例如React、Vue等),基本上是用于基于状态构建UI的。显然,这是开发人员的需要。如果我们可以将基于状态的样式转换为CSS,那么我们所需要的JavaScript就越少了,而且可以更好地分离关注点。
某些值。
确实,我们已经有了改变样式块的机制。我们可以通过JavaScript修改class,并且class可以应用我们喜欢的CSS。但这并不意味着CSS中基于状态的样式就没用了。我们并不总是有能力或者可能不想为此编写任何JavaScript,而是通过其他方式更改自定义属性(例如媒体查询、HTML更改等)。在CSS中这样做意味着帮助分离业务逻辑和视觉风格逻辑。
h3>svg>A trick!使用@keyframes表示状态
CSS@keyframes可以用于switch的特定更改。通过animation属性的强大功能,可以选择要显示的帧,并让它在该帧上暂停,有效地模仿switch case语句或基于状态的样式。
让我们通过使用animation-delay属性来了解这一点:CodePen Embed Fallback
下面是该笔中发生的情况:
– animation-delay:负延迟值强制特定帧(或介于两者之间的帧)生效(正值不起作用)。我们将使用此技巧来强制状态。
– animation-play-state: paused:我们实际上没有设置任何动画,因此动画将保持暂停。
– animation-duration:实际持续时间无关紧要,它只需要一个,这样就有一个时间跨度来保持不同的关键帧。我们将它设为100.001s这样,如果我们延迟100s,最后一个关键帧仍然有效。持续时间需要大于延迟值。
第一个范围输入修改-100s和0s之间的animation-delay。在我们直接跳转到工作示例之前,是一个真实的用例,值得更详细地讨论这个技巧,因为有些细微差别你应该注意。
首先,这个技巧只适用于数值。所以,颜色值或字符串,因为它严格执行数学。
第二,布尔技巧。考虑一个变量–value: 10,它可以取0到100之间的任何数值。如果值大于5,我们要应用颜色。我们如何知道值是大于还是小于5?即使我们真的知道,这对我们有什么帮助呢?
–is-above-5: clamp(0, var(–value) – 5, 1)–value–is-above-5结果;强制值不小于0。这个范围是实现布尔变量所需要的全部。
在clamp()的第二个参数中编写任何数学表达式,输出0(或以下)或1(或以上)。一定不要写任何可能导致数字介于0和1之间的数学题。
下面是解决方法: