Angular Animation 不断在每个动作上重新启动答案

【问题标题】：Angular Animation keeps restarting on every ActionAngular Animation 不断在每个动作上重新启动
【发布时间】：2020-10-12 07:35:54
【问题描述】：

我正在尝试在 Angular 项目中的列表上制作缩放动画；但是，我需要的是只有在按下屏幕上的某些按钮时才会触发动画（视频中显示的红色和绿色按钮）。

现在，无论我点击什么，动画都会重新启动，有谁知道可能是什么问题？

TypeScript 代码：

  animations: [
    trigger('enableDisable', [
    state('void', style({
    transform: 'scaleY(0)'
  })),
    state('*', style({
    transform: 'scaleY(1)'
  })),
    transition('void => *', animate(200))
])

]

HTML 代码：

  <div
    [@enableDisable]
    (click)="onSelect(item)" *ngFor="let item of itemList">
    <app-item-task [item]="item"></app-item-task>
  </div>

我上传了一个演示该问题的视频，对视频质量感到抱歉，我不得不降低它： Animation Issue Video

谢谢！

【问题讨论】：

标签： javascript html node.js angular typescript

【解决方案1】：

像这样为您的 ngFor 添加跟踪功能

*ngFor="let item of itemList; trackBy: trackById"

trackById(index, item) { 
  return item.id;
}

如果您没有指定您的项目的任何内容，您可以尝试仅返回 index.html。当它被添加时，ngFor 不会渲染新元素，而是在不需要时重用旧元素

【讨论】：