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

【问题标题】：How can I do a crossfade with angular animate and ngFor?如何使用 angular animate 和 ngFor 进行交叉淡入淡出？
【发布时间】：2017-05-17 22:10:22
【问题描述】：

当我更新传入*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 动画的持续时间

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

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

【问题讨论】：

标签： angular angular2-animation

【解决方案1】：

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

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

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

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

【讨论】：