Angular 角度动画首次工作，但赢得'；不要在以后的通话中运行

我正在尝试使用角度动画制作一些数字的颜色，我希望动画根据数字的增加或减少将数字的颜色更改为绿色/红色，然后我希望颜色在几秒钟后淡入黑色

然而，这根本不能正常工作，对于动画的第一次迭代，它们似乎工作正常，但是第一次动画之后的任何事情都意味着动画根本不会启动，或者其中一些会启动，但不是所有的都会启动

有时，某些减少动画会正确触发，但在同一更新中，其他减少动画不会触发，尽管differenceInPrice的值都会减小。增加和减少都会发生这种情况

 trigger('change', [
      transition('* => increase', [
        animate('5s', keyframes([
          style({color: '#0be000'}),
          style({color: '#0be000'}),
          style({color: 'black'})
        ]))
      ]),
      transition('* => decrease', [
        animate('5s', keyframes([
          style({color: 'red'}),
          style({color: 'red'}),
          style({color: 'black'})
        ]))
      ])
    ])

动画本身非常简单，如果@change触发器从任何状态更改为“增加”，我将运行关键帧以更改为绿色。同样，如果状态更改为“减少”，我运行关键帧以更改为红色。如果状态从*变为中性，则不会发生任何事情，因此我没有为此添加动画

<td mat-cell #holdersCell *matCellDef="let element; let i = index" [@change]="dataSource.data[i].differenceInPrice === 0 ? 'increase' : dataSource.data[i].differenceInPrice[i] === 1 ? 'decrease' : 'neutral'"> {{element.currentCount}} </td>

---

编辑：我做了更多的测试，当旧状态与新状态相同时，动画看起来不会启动。所以，如果“增加”变为“增加”，我还能绕开它吗？

好吧，我不认为这是你想要的，但有一个想法是先让所有东西都经历一个中间过渡状态，然后在毫秒暂停后应用新状态

<td mat-cell #holdersCell *matCellDef="let element; let i = index"  [@change]="doTrigger(i)"> {{element.currentCount}} </td>

doTrigger(i:number) {
 this.dataSource.data[i].differenceInPrice='nothing';
 setTimeout(()=>{
   this.dataSource.data[i].differenceInPrice === 0 ? 'increase' : 
   this.dataSource.data[i].differenceInPrice[i] === 1 ? 'decrease' : 'neutral';
  }, 20)
}

{{element.currentCount}
doTrigger（i:编号）{
this.dataSource.data[i].differenceInPrice='nothing'；
设置超时（（）=>{
this.dataSource.data[i].differenceInPrice==0？“增加”：
this.dataSource.data[i].differenceInPrice[i]==1？'decrease'：'neutral'；
}, 20)
}

refresh() {
    this._tokenService.tokenDataSubject.subscribe((tokenData: TokenData[]) => {
      if(this.oldCounts && this.oldCounts.length > 0){
        tokenData = this.compareDifferenceInPrice(tokenData, this.oldCounts);
      }
      this.dataSource.data = tokenData;

      this.oldCounts = [];
      tokenData.forEach(x => {
        this.oldCounts.push({
          id: x.id,
          oldCount: x.currentCount
        });
      })
    })
  }

<td mat-cell #holdersCell *matCellDef="let element; let i = index"  [@change]="doTrigger(i)"> {{element.currentCount}} </td>

doTrigger(i:number) {
 this.dataSource.data[i].differenceInPrice='nothing';
 setTimeout(()=>{
   this.dataSource.data[i].differenceInPrice === 0 ? 'increase' : 
   this.dataSource.data[i].differenceInPrice[i] === 1 ? 'decrease' : 'neutral';
  }, 20)
}