如何使用 angular animate 和 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 的颜色都会显示，这会使动画不稳定。

我试过了：

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

我想要： 平滑淡出 and/or 在新内容 fades/slides 进入之前（或同时）滑出我现有的内容。

这是一个演示问题的 plunkr：https://plnkr.co/edit/IDE6q6lJ84QI2Zirvn4P?p=preview

Answer 1

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

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

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

//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>

如何使用 angular animate 和 ngFor 进行交叉淡入淡出？

How can I do a crossfade with angular animate and ngFor?

angular

angular2-animation