Анимация изменений в угловом списке @for без «перепрыгивания» списка при изменении каждого элемента. ⇐ CSS

[Anonymous]

Я пытаюсь анимировать изменение элементов в списке в angular. Анимация должна представлять собой простое постепенное затухание. Это прекрасно работает для вставки или удаления отдельных элементов. Однако в коде имеется логика нумерации страниц, поэтому при изменении страницы изменяется каждый элемент списка. Это приводит к тому, что все новые элементы исчезают, в то время как все старые элементы все еще исчезают. Таким образом, примерно за 300 мс размер списка увеличивается в два раза, что приводит к скачку представления.
Я хочу добиться того, чтобы первая «страница» элементов заканчивала исчезать до того, как начнутся новые элементы. постепенное появление, предотвращая тем самым переход страницы.
Список

@for (item of items(); track item.id; let idx = $index) {


}


Компонент:
Component({
/** ... **/
})
export class TaskListComponent {
/** ... **/
items = computed((): Item[] => {
const items = // signal from a store
const pagination = this.pagination(); // boolean
const paginationOffset = this.paginationOffset(); // increases with 10 on next page
let paginatedTasks = []
if (pagination) {
for(let i = 0; i < items.length; i++) {
if (i < paginationOffset + 10 && i >= paginationOffset) {
paginatedItems.push(items);
}
}
} else {
paginatedItems = items;
}
return paginatedItems
});
}

Анимация:
export const fadeInOutAnimation = trigger('fadeInOut', [
state('void', style({ opacity: 0,})), // Initial state when the element is not present
transition(':enter', [animate('300ms ease-in')]), // When the element enters
transition(':leave', [animate('300ms ease-out')]) // When the element leaves
]);


Подробнее здесь: https://stackoverflow.com/questions/793 ... mp-when-ev