web-dev-qa-db-ja.com

計算でCSSカウンターを使用する

私はリストを持っていますl> li * 5（常に同じ量ではありません）。私はカウンターを設定しました：

1 2 3 4 5

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

The Questioncounter（skill）を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
htmlcsscss-counter
15
T04435

質問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

ただし、値を整数として返し、calcで使用できるcounter-value()関数を追加する提案がありました。ここを参照してください： https://drafts.c​​sswg.org/css-lists-3/#counter-functions （下にスクロールして問題4を表示）。

そのため、現時点では、counter内でcalcを使用できず、_counter-value_はまだ存在しません。

27
Abhitalks

これは必ずしも洗練された解決策ではありませんが、n番目の子または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>
6
goodship11