解决Angular @for列表分页切换时动画导致页面跳动的问题

分页切换时新旧列表项同时执行淡入淡出，导致短时间内列表高度翻倍、页面跳动，核心原因是Angular默认并行处理所有:enter和:leave动画。以下是两种可行的解决思路：

方案一：容器级动画序列控制 #

通过父容器动画的sequence方法，强制先完成所有旧项的淡出，再启动新项的淡入，无需改动分页逻辑。

1. 定义容器动画 #

替换原有单个项的动画，创建容器级触发器：

import { trigger, transition, query, style, animate, sequence } from '@angular/animations';

export const listPageAnimation = trigger('listPageAnimation', [
  transition('* => *', sequence([
    // 先执行所有旧项的淡出动画
    query(':leave', animate('300ms ease-out', style({ opacity: 0 })), { optional: true }),
    // 等待旧项动画结束后，执行新项淡入
    query(':enter', [style({ opacity: 0 }), animate('300ms ease-in', style({ opacity: 1 }))], { optional: true })
  ]))
]);

2. 更新模板结构 #

将列表包裹在带动画的容器中，绑定列表长度触发动画：

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

注意：移除list-item上的@fadeInOut，避免动画冲突。

方案二：延迟分页切换，先隐后显 #

保留单个项动画的前提下，通过控制列表显隐状态，等待旧项淡出完成后再加载新分页数据。

1. 组件中添加状态控制 #

新增信号管理列表可见性，修改分页切换逻辑：

@Component({
  /** ... 原有配置 ... **/
})
export class TaskListComponent {
  /** ... 原有属性 ... **/
  paginationOffset = signal(0);
  isListVisible = signal(true);

  changePage(newOffset: number) {
    // 隐藏列表，触发旧项淡出
    this.isListVisible.set(false);
    // 等待动画时长（300ms）后更新分页并显示新列表
    setTimeout(() => {
      this.paginationOffset.set(newOffset);
      this.isListVisible.set(true);
    }, 300);
  }
}

2. 调整模板 #

根据可见性信号控制列表渲染，保留单个项动画：

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

可选：给容器添加高度过渡，进一步优化跳动问题：

.relative {
  transition: height 300ms ease-out;
}

额外优化：TrackBy逻辑 #

确保@for的track绑定唯一标识（如item.id），Angular会复用相同标识的项，减少不必要的动画触发：

@for (item of items(); track item.id; let idx = $index) {
  <!-- ... -->
}

内容的提问来源于stack exchange，提问作者crazything