Для каскадной анимации списка часто приходится передавать индекс из JavaScript или прописывать
:nth-child() для каждого элемента.<div style={{ "--i": index }} />В CSS появились функции
sibling-index() и sibling-count(): первая возвращает позицию элемента среди всех дочерних элементов родителя, начиная с 1, вторая — их общее количество.Поэтому задержку от
0ms можно вычислить автоматически:.item {
animation-delay: calc((sibling-index() - 1) * 80ms);
}Добавили десятый элемент — ничего менять не нужно. Его индекс вычислится из DOM автоматически.
Общее количество элементов тоже доступно прямо в выражении:
.item {
--total: sibling-count();
}Это можно использовать для stagger-анимаций, распределения элементов и вычислений, которые раньше требовали
--i, :nth-child() или генерации CSS из JavaScript.
Функции учитывают все соседние элементы одного родителя, а не только элементы с классом .item. Поддержка пока ограничена, поэтому перед использованием нужно проверить целевые браузеры.
Code Ready | #совет
