角度动画首次工作，但不会在后续调用中运行

Question

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

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

有时，一些减少动画会正常启动，但在同一更新中，其他减少动画不会启动，尽管两者的差异InPrice值都在降低。增加和减少都会发生这种情况。

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>

使用以下方法设置每个dataSource元素的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
});
})
})
}

编辑：我做了更多的测试，当旧状态和新状态相同时，动画似乎不会启动。那么，如果"增加"改为"增加"，我还能绕过这一点吗？

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