如何使用角度动画和ngFor进行交叉渐变？

Question

当我更新我收集到*ngFor的集合时触发动画：

//JS
state : string = 'a';
colors = {
  a: ['red','blue','green','yellow'],
  b: ['orange']
}

public onClick (){
  this.state = this.state === 'a' ? 'b' : 'a';
}

//HTML
<div *ngFor="let color of colors[state]" 
   [@animationState]="state" 
   (click)="onClick()">
     {{color}}
</div>

问题：动画发生时，a和b的颜色都会显示，这会让动画变得生涩。

我尝试过：

• 在transform: scale(0)动画开始之前设置display:none或void => *
• 按void => *动画
的持续时间延迟* => void动画

我希望能够在新内容淡出/滑入之前（或同时）平滑淡出和/或滑出现有内容。

这是一个证明问题的傻瓜：https://plnkr.co/edit/IDE6q6lJ84QI2Zirvn4P?p=preview

Answer 1

我设法使它工作，但感觉就像一个黑客。我没有立即将ngFor集合设置为新值，而是

1. 将新值存储在临时变量
中
2. 将ngFor集合设置为空集合
3. 当空集合的动画完成时，将集合更新为存储在临时变量
中的值

这会触发两个动画而不是一个动画，但似乎效果不错。

//JS
state : string = 'a';
temp : string;
colors = {
  a: ['red','blue','green','yellow'],
  b: ['orange'],
  empty: []
}

public onClick (){
  this.temp = this.state === 'a' ? 'b' : 'a';
  this.state = 'empty'
}

public animationComplete(){
  if(this.temp){
    this.state = this.temp;
    this.temp = undefined;
  }
}

//HTML
<div *ngFor="let color of colors[state]" 
   [@animationState]="state" 
   (@animationState.done)="animationComplete()"
   (click)="onClick()">
     {{color}}
</div>