在角度 @for 列表中对变化进行动画处理，而在每个项目更改时列表不会“跳转”

Question

我正在尝试以角度动画列表中项目的更改。动画应该是简单的淡入淡出。这对于插入或移除单个项目来说绝对有效。然而，代码具有分页逻辑，因此当更改页面时，列表中的每个项目都会更改。这会导致所有新项目淡入，而所有旧项目仍然淡出。因此，在大约 300 毫秒的时间里，列表的大小增加了一倍，导致视图跳转。

我想要实现的是，项目的第一个“页面”在任何新项目开始淡入之前完成淡出，从而防止页面跳转。

名单

<div class="relative">
  @for (item of items(); track item.id; let idx = $index) {
    <list-item
      @fadeInOut
      [item]="item"
      [idx]="idx"
    >
    </list-item>
  }
</div>

成分：

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

动画：

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

Answer 1

我最终设置了 150 毫秒的延迟并设置了 display:none 以使该项目在新列表中动画之前完全消失。这似乎适用于我所有需要的情况。

export const fadeInOutListItemAnimation = trigger('fadeInOutListItem', [
  state('void', style({ opacity: 0, display: 'none'})), // Initial state when the element is not present
  transition(':enter', [
    animate('150ms 150ms ease-in', style({ opacity: 1, display: '*'}))
  ]), // When the element enters
  transition(':leave', [
    animate('150ms ease-out', style({ opacity: 0, display: 'none' })),
  ]) // When the element leaves
]);