角度动画第一次工作，但不会在后续调用中运行答案

【问题标题】：Angular animations working first time but won't run on subsequent calls角度动画第一次工作，但不会在后续调用中运行
【发布时间】：2021-05-08 14:20:05
【问题描述】：

我正在尝试使用 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>

每个数据源元素的differenceInPrice 使用以下方法设置

compareDifferenceInPrice(newData: TokenData[], oldData: any[]){
    newData.forEach(token => {
      let newHolderCount = token.currentCount;
      let oldHolderCount = oldData.find(x => x.id === token.id).oldCount;

      token.differenceInPrice =  newHolderCount < oldHolderCount ? DifferenceInPriceEnum.Decrease :
        newHolderCount > oldHolderCount ? DifferenceInPriceEnum.Increase : DifferenceInPriceEnum.Neutral;

      console.log(`Difference ${token.name} - ${DifferenceInPriceEnum[token.differenceInPrice]} (${newHolderCount} ${oldHolderCount}`)
    });

    return newData;
  }

这是由称为 OnInit 的刷新方法运行的

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
        });
      })
    })
  }

编辑：我做了更多测试，看起来当旧状态与新状态相同时动画不会触发。因此，如果“增加”更改为“增加”，我是否可以解决这个问题？

【问题讨论】：

标签： angular animation

【解决方案1】：

好吧，我不认为这就是你所追求的，但一个想法是首先将所有内容置于中间过渡状态，然后在毫秒暂停后应用新状态...

<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)
}

【讨论】：