как можно пронумировать список js-ом чтобы в css я мог умножить эту переменную calc-ом?

Рейтинг: 0Ответов: 1Опубликовано: 27.05.2023

как можно пронумировать список js-ом чтобы в css я мог умножить эту переменную calc-ом? нужно переменную в delay чтобы каждый последующий элемент был с такой задержкой, но сколько элементов будет неизвестно, чтобы не задавать для каждого элемента в ксс delay..

ul {
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 50%;
  height: 100%;
  flex-direction: column;
  gap: 49px;
  position: absolute;
  top: 0;
  left: 50%;
  opacity: 0;
  transition: opacity 0.3s linear;
  overflow: hidden;
}

ul.active {
  opacity: 1;
}

li {
  position: relative;
  top: 100%;
  opacity: 0;
  transition: opacity 0.3s linear, top 0.3s linear;
}

ul.active li {
  top: 0;
  opacity: 1;
}

ul.active li:nth-child(1) {
  transition-delay: 0.1s;
}

ul.active li:nth-child(2) {
  transition-delay: 0.2s;
}

ul.active li:nth-child(3) {
  transition-delay: 0.3s;
}

ul.active li:nth-child(4) {
  transition-delay: 0.4s;
}
<ul class="active">
  <li>текст</li>
  <li>текст</li>
  <li>текст</li>
  <li>текст</li>
  <li>текст</li>
  <li>текст</li>
  <li>текст</li>
</ul>

javascript
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Если я правильно понял задачу можно сделать это таким образом создав счетчик внутри css, тогда не нужен js.

body {
  counter-reset: my-counter; /* инициируем счетчик */
}

ul {
  list-style: none; /* прячем маркеры */
  padding-left: 0; 
}

li::before{
  counter-increment: my-counter 111; /* увеличиваем счетчик*/
  content: counter(my-counter); /* выводим значение */
}
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

Если нужно сделать так чтобы 111 задавалось из js — используем css переменную.

const root = document.documentElement;
root.style.setProperty('--inc-step', 111);
:root {
  --inc-step: 1; /* css переменная для шага инкремента в списке*/
}

body {
  counter-reset: my-counter; /* инициируем счетчик */
}

ul {
  list-style: none; /* прячем маркеры */
  padding-left: 0; 
}

li::before{
  counter-increment: my-counter var(--inc-step); /* увеличиваем счетчик*/
  content: counter(my-counter); /* выводим значение */
}
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

Пример для анимации (если нужно чтобы каждый последущий элемент появлялся с некоторой задержкой) здесь достаточно цикла в js так как счетчик нельзя использовать в расчетах calc:

const btn = document.querySelector('button')

btn.onclick = function(){
  const ul = document.querySelector('ul');
  ul.classList.toggle('active');
  delayMs = 0; 
  for (child of ul.children){
    delayMs += 100;
    child.style.transitionDelay = delayMs + 'ms'
  }
}
ul {
  list-style: none; /* прячем маркеры */
  padding-left: 0; 
}

ul li{
  opacity: 0.3;
}

ul.active li{
  transition: opacity 0.3s linear, top 0.3s linear;
  opacity: 1;
}
<button>Animate</button>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>

Для нескольких списков:

const btnFirst = document.getElementById('first')
const btnSecond = document.getElementById('second')

function animate ({target}){
  const ul = target.nextElementSibling
  ul.classList.toggle('active');
  delayMs = 0; 
  for (child of ul.children){
    delayMs += 100;
    child.style.transitionDelay = delayMs + 'ms'
  }
}

btnFirst.onclick = animate
btnSecond.onclick = animate
ul {
  list-style: none; /* прячем маркеры */
  padding-left: 0; 
}

ul li{
  opacity: 0.3;
}

ul.active li{
  transition: opacity 0.3s linear, top 0.3s linear;
  opacity: 1;
}
<button id="first">Animate</button>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

<button id="second">Animate</button>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>