Animieren von Änderungen in einer eckigen @for-Liste, ohne dass die Liste springt, wenn jedes Element geändert wird ⇐ CSS

[Guest]

Ich versuche, die Änderung von Elementen in einer Liste in Angular zu animieren. Die Animation sollte ein einfaches Ein- und Ausblenden sein. Dies funktioniert völlig einwandfrei, wenn einzelne Elemente eingefügt oder entfernt werden. Allerdings verfügt der Code über eine Paginierungslogik, sodass beim Ändern einer Seite jedes einzelne Element in der Liste geändert wird. Dadurch werden alle neuen Elemente eingeblendet, während alle alten Elemente noch ausgeblendet werden. Für etwa 300 ms ist die Liste also doppelt so groß, was dazu führt, dass die Ansicht springt.
Was ich erreichen möchte, ist, dass die erste „Seite“ mit Elementen ausgeblendet wird, bevor neue Elemente beginnen eingeblendet und so das Springen der Seite verhindert.
Die Liste

Code: Select all

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


}

Komponente:

Code: Select all

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[i]);
}
}
} else {
paginatedItems = items;
}
return paginatedItems
});
}

Animation:

Code: Select all

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
]);