Angular中*ngFor内动画仅执行一次的问题求助

你的动画仅首次执行，核心原因是没有给动画绑定动态变化的状态：Angular 默认只会在元素初始化时触发一次无状态绑定的动画，后续没有状态变更的话，不会重新执行动画逻辑。

1. 给每个循环项维护动画状态 #

在组件里为每个exercices项单独维护一个动画状态变量，比如用数组存储：

// 组件类内
animStates: string[] = [];

ngOnInit() {
  // 初始化时给每个循环项设置初始状态
  this.animStates = this.exercices.map(() => 'in');
}

2. 模板绑定动画状态 #

把动画指令[@a1]绑定到对应索引的状态变量，同时在文本框失焦时触发状态更新：

<div *ngFor="let exec of exercices; index as i; trackBy: trackByIndex">
  <div
    class="answer"
    id="answer{{i}}"
    [@a1]="animStates[i]">
  </div>
  <!-- 你的文本框，绑定失焦事件触发动画 -->
  <input (blur)="triggerAnimation(i)">
</div>

3. 编写触发动画的方法 #

通过切换状态值，让Angular检测到变化并重新执行动画：

// 组件类内
triggerAnimation(index: number) {
  // 先切换到临时状态，再切回初始状态，触发过渡动画
  this.animStates[index] = 'temp';
  // 用setTimeout确保Angular完成状态检测后再切换回来
  setTimeout(() => {
    this.animStates[index] = 'in';
  }, 10);
}

4. 优化动画配置（可选） #

调整动画的过渡规则，让状态切换逻辑更清晰：

animations: [
  trigger('a1', [
    state('in', style({
      opacity: 1,
      transform: 'translateX(0)'
    })),
    // 临时状态和in状态样式一致，避免额外视觉变化
    state('temp', style({
      opacity: 1,
      transform: 'translateX(0)'
    })),
    // 明确只在temp→in时触发动画
    transition('temp => in', [
      style({
        opacity: 0.1,
        transform: 'translateX(100px)'
      }),
      animate(2000)
    ])
  ])
]

5. 配置trackBy避免元素复用（可选） #

如果exercices数组会动态更新，添加trackBy确保*ngFor不会复用元素导致状态混乱：

// 组件类内
trackByIndex(index: number, item: any) {
  return index; // 或使用item的唯一标识，比如item.id
}

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