For Loop неправильно применяет nth-child
Используя Sass, я перебираю элементы с классом animateMe и применяю задержку анимации, используя индекс в качестве множителя.
@for $i from 1 through 100 {
.animateMe:nth-child(#{$i}) {
animation-delay: .5s * $i;
}
}
Используя Angular, я применяю класс animateMe к div, только когда выполняются условия с ngClass.
<div id = "neededfoodnames" *ngFor = "let list of lists; let i = index" [ngClass] = "{'animateMe':lists[i-1]?.category != list.category && animate == true}">
.....
</div>
Этот класс должен применяться только в том случае, если категория элемента отличается от категории последнего элемента, а для параметра animate установлено значение true, что и есть.
animate: boolean = true;
В результате получается 4 блока с классом animateMe.
Однако задержка анимации не применяется правильно, так как первый и второй div имеют правильные задержки 0,5 с и 1 с соответственно, а третий div имеет неправильную задержку 3 с.
Третий div получает класс animateMe:nth-child(6), но должен быть animateMe:nth-child(3).
Как я могу это исправить? Я создал StackBlitz для этого выпуска.
также PS у вас есть несколько экземпляров #neededfoodnames :)
@stwilz Я удалил #neededfoodnames. Класс animateMe следует применять только к 4 блокам div, поэтому animateMe:nth-child(6) не должен существовать, но он существует.
lists[i-1]?.category Я вижу здесь опечатку. точка после вопросительного знака в тернарном операторе.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
В вашем массиве lists есть объекты, которые не считаются элементом animateMe. Только некоторые элементы имеют класс animateMe. Смотрите этот снимок экрана:
Этот снимок экрана объясняет, почему селектор nth-child не работает должным образом. Я вижу для вас два решения.
Решение 1
Лучшее решение - убрать эти элементы. В идеале у вас должны быть только элементы animateMe в этом конкретном разделе, например:
<div class = "animateMe">...</div>
<div class = "animateMe">...</div>
<div class = "animateMe">...</div>
<div class = "animateMe">...</div>
Вы должны найти способ отображения того же пользовательского интерфейса, но с меньшим количеством элементов div (например, с использованием большего количества стилей или просто перемещением элементов в разделах animateMe). Если по какой-то причине это невозможно, вы можете рассмотреть решение №2.
Решение 2
Альтернативным (и не таким чистым) решением для вас является предварительная обработка этого массива и сохранение атрибута order, который может использоваться циклом. Например:
lists = [{}, {order:1}, {}, {}, {order:2}, {}, {order:3}, {}, {}];
Затем вы можете пройти через массив и добавить атрибут data-order, который мы можем сопоставить с CSS:
<div *ngFor = "let list of lists; let i = index" [ngClass] = "{'animateMe': list.order && animate}" [attr.data-order] = "animate ? list.order : null">
...
</div>
Если свойство order не определено в вашем объекте, атрибут data-order не будет напечатан. Вот пример вывода:
<div>...</div>
<div class = "animateMe" data-order = "1">...</div>
<div>...</div>
<div>...</div>
<div class = "animateMe" data-order = "2">...</div>
<div>...</div>
<div class = "animateMe" data-order = "3">...</div>
<div>...</div>
<div>...</div>
Последний шаг - изменить код SaSS, чтобы он соответствовал этим элементам:
@for $i from 1 through 100 {
div[data-order = "#{$i}"].animateMe {
animation-delay: .5s * $i;
}
}
Плохая практика - нацеливать элементы в CSS по их типу тега элемента, вы можете удалить div из приведенного выше Sass, и он все равно будет работать, как ожидалось.
@EdmundReed Не могли бы вы разместить ссылку на ссылку, подтверждающую, что это плохая практика? Учитывая, что браузеры обычно индексируют элементы по имени узла, div должен сделать селектор более эффективным, и это, по определению, является хорошей практикой.
Возможно, это микроскопически лучше с точки зрения производительности, но с точки зрения ремонтопригодности и масштабируемости это плохая практика. Эта статья, похоже, объясняет, почему frontstuff.io/you-need-to-stop-targeting-tags-in-css. При таких вещах ремонтопригодность и масштабируемость, как правило, предпочтительнее крошечного прироста производительности.
Кажется, весь CSS в порядке (поскольку в цикле sass все ваши классы создаются правильно, поэтому: nth-child работает должным образом). Вы имеете в виду, что у
#neededfoodnames:nth-child(4)нет контента? Или вы пытаетесь перезаписать свой CSS с помощью ng-animate