Angular分段长列表切换动画异常问题求助

核心问题 #

1. :leave动画未触发：直接替换items数组时，Angular会尝试复用列表元素（默认基于对象引用或索引），不会移除旧元素再添加新元素，因此不会触发:leave动画。
2. 同时显示两个分块：切换分块时未等待旧分块的离开动画完成就渲染新分块，导致DOM中同时存在新旧两个分块容器。

实现方案 #

1. 调整DOM结构与动画绑定 #

使用独立容器承载每个分块，通过*ngIf控制容器的创建/销毁，确保分块容器进出DOM时触发:enter/:leave动画：

<div 
  class="chunk-container" 
  *ngIf="activeChunk !== null"
  [@chunkAnimation]
  (@chunkAnimation.done)="onAnimationComplete()"
>
  <div *ngFor="let item of activeChunk" class="list-item">
    -- {{ item }} --
  </div>
</div>

2. 定义分块动画（含内部元素 stagger 效果） #

为分块容器添加进出动画，同时对内部元素设置 stagger 逐个动画：

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

@Component({
  // ... 其他元数据
  animations: [
    trigger('chunkAnimation', [
      transition(':enter', [
        // 容器先淡入
        style({ opacity: 0 }),
        animate('200ms ease-out', style({ opacity: 1 })),
        // 内部元素逐个从下方滑入
        query('.list-item', [
          style({ opacity: 0, transform: 'translateY(20px)' }),
          stagger(100, [
            animate('300ms ease-out', style({ opacity: 1, transform: 'translateY(0)' }))
          ])
        ], { optional: true })
      ]),
      transition(':leave', [
        // 内部元素逐个向上滑出
        query('.list-item', [
          stagger(-100, [
            animate('300ms ease-in', style({ opacity: 0, transform: 'translateY(-20px)' }))
          ])
        ], { optional: true }),
        // 容器最后淡出
        animate('200ms ease-in', style({ opacity: 0 }))
      ])
    ])
  ]
})

3. 控制分块切换时序 #

通过状态变量和动画完成事件，确保旧分块离开动画完成后再切换到新分块：

export class YourComponent {
  // 分块数据
  private chunks = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
  // 当前激活的分块
  activeChunk = this.chunks[0];
  // 当前分块索引
  private currentIndex = 0;
  // 是否处于动画过渡中
  private isTransitioning = false;

  ngOnInit() {
    // 初始加载后调度第一次切换
    this.scheduleNextSwitch();
  }

  onAnimationComplete() {
    if (this.isTransitioning) {
      this.isTransitioning = false;
      this.scheduleNextSwitch();
    }
  }

  private scheduleNextSwitch() {
    setTimeout(() => {
      this.isTransitioning = true;
      // 更新到下一个分块
      this.currentIndex = (this.currentIndex + 1) % this.chunks.length;
      this.activeChunk = this.chunks[this.currentIndex];
    }, 3000); // 每个分块显示3秒后切换
  }
}

4. 补充CSS样式 #

为容器和元素添加基础样式，确保动画效果正常展示：

.chunk-container {
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid #eee;
}

.list-item {
  margin: 0.5rem 0;
  padding: 0.5rem;
  background: #f5f5f5;
}

关键说明 #

• 使用*ngIf控制分块容器的DOM存在状态，确保:leave动画在容器被移除时触发。
• 通过(@chunkAnimation.done)监听动画完成事件，避免分块切换过快导致的重叠显示。
• stagger函数用于实现内部元素的逐个动画效果，增强视觉层次感。
• 添加{ optional: true }到query中，避免初始加载时找不到元素抛出错误。

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