在 calc 中使用 css 计数器

Question

我有一个列表 ul>li*5 （不总是相同的数量）。我设置了一个计数器，我得到了：

1 2 3 4 5

 li:nth-child(n):before {
  counter-increment: skill;
  content: counter(skill);
  color: white;
}

问题 我可以在 calc() 中使用 计数器（技能） 还是可以向它添加单位 px em rem % ms s

我试过了：

 transition: all 250ms linear #{counter(skill)} * 1s;
transition: all 250ms linear counter(skill) * 1s;

我想增加延迟，例如：

 li 1s delay
li 2s delay
li 3s delay
li 4s delay
li Xs delay

原文由 T04435 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

问题 我可以在 calc() 中使用计数器（技能）吗

不，你不能。

calc 函数不允许使用 counter 函数作为其组件。从这里的规范 - https://www.w3.org/TR/css3-values/#calc-notation ：

calc() 表达式的组件可以是文字值或 attr() 或 calc() 表达式。

对此有很多要求，但总是被拒绝。根本原因似乎是 counter() 函数表示（输出）一个 <string> 因此不能直接用于 calc 。此外，计数器被认为对浏览器来说非常昂贵。

参考： https ://lists.w3.org/Archives/Public/www-style/2016Aug/0082.html

但是，有人建议添加一个 counter-value() 函数，该函数将返回整数值并可用于 calc 。请参阅此处： https ://drafts.csswg.org/css-lists-3/#counter-functions（向下滚动以查看第 4 期）。

因此，截至目前，您不能在 counter calc 并且 counter-value 尚不存在。

原文由 Abhitalks 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这不一定是一个优雅的解决方案，但您可以使用 nth-child 或使用 css 变量来解决它。下面的代码，或在这里查看： https ://codepen.io/goodship11/pen/XBVeez

第 n 个子版本：

 li {
  opacity: 0;
  padding: 5px 0 5px 5px;
  list-style: none;
  background-color: rgba(200,50,255,.2);
  display: block;
  width: 20%;
  height: 10%;
}
li:nth-child(even) { background-color: rgba(200,50,255,.5); }

@keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } }

li { animation: fade 1.5s ease-in forwards; }

/* Since you're doing an animation, chances our the number
of elements will be small, so you can just pre-define for however
many versions using nth-child. This wouldn't work for use cases
where, for example, you want a percentage of the whole instead
of a fixed number */

li:nth-child(1) { animation-delay: 1s; }
li:nth-child(2) { animation-delay: 2s; }
li:nth-child(3) { animation-delay: 3s; }
li:nth-child(4) { animation-delay: 4s; }
li:nth-child(5) { animation-delay: 5s; }
li:nth-child(6) { animation-delay: 6s; }
li:nth-child(7) { animation-delay: 7s; }
li:nth-child(8) { animation-delay: 8s; }

 <ul>
  <li>Thing 1</li>
  <li>Thing 2</li>
  <li>Thing 3</li>
  <li>Thing 4</li>
  <li>Thing 5</li>
</ul>

CSS变量版本：

 li {
  opacity: 0;
  padding: 5px 0 5px 5px;
  list-style: none;
  background-color: rgba(200,50,255,var(--fader));
  display: block;
  width: 20%;
  height: 10%;
}
@keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } }

li { animation: fade 1.5s ease-in forwards; }

/* Below is an alternative approach using the same variable
from the opacity. I added in a scaling factor to show how you
can use one variable for multiple things in cases like this.  */

:root {--factor: .5; }
li { animation-delay: calc(10s * var(--fader) * var(--factor));}

 <ul>

  <!-- You can define the variable in-line, useful for in
cases where you're writing the html manually but don't want to
mess with the stylesheet. '--fader: .1' defines the variable
for that instance of the li -->

  <li style="--fader: .1;">Thing 1</li>
  <li style="--fader: .2;">Thing 2</li>
  <li style="--fader: .3;">Thing 3</li>
  <li style="--fader: .4;">Thing 4</li>
  <li style="--fader: .5;">Thing 5</li>
</ul>

原文由 goodship11 发布，翻译遵循 CC BY-SA 4.0 许可协议