Настраиваемая задержка для n количества элементов?

Question

[Олег Андрианов]

Доброго времени суток, уважаемые Хабровчане!
Вот задался вопросом, погуглил и ничего не нашел. Может плохо искал)

Суть вот в чем. У меня есть допустим список ul, в котором у меня n дочерних li. Когда на ul добавляем класс --active, на li срабатывает transition с задержкой. Т.к. элементов li может быть много, то встает резонный вопрос: как сделать так, чтобы при увеличении количества li, увеличивалась transition-delay для каждого последующего li без непосредственного прописывания каждому задержки.
Сам я думал в сторону авто-инкремента, но так и не додумался.

Answer 1

[Сергей Сергей]

ключевой недостаток, на мой взгляд, это пользовательские значения в атрибутах стиля каждого элемента — всё равно что вручную задержку записать.

Comments

[Олег Андрианов]

Я сделал также, через переменные в атрибутах. Интересно все же, можно это сделать на чистом css.

[Сергей Сергей]

Олег Андрианов, вот, через nth-child сделать внедрение значений, разве что.

[Олег Андрианов]

Сергей Сергей, я не нашел как выбирать каждый последующий элемент

[Сергей Сергей]

вот же

.row:nth-child(1) { --num: 1; }
.row:nth-child(2) { --num: 2; }
.row:nth-child(3) { --num: 3; }
.row:nth-child(4) { --num: 4; }

для меню больших размеров надо будет описать больше строк, пока так.

[Олег Андрианов]

Сергей Сергей, да, но суть в том, чтобы автоматизировать для любого количества элементов. Вероятно, это будет проще сделать перебором массива на js.