angular - 如何使用 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显示，这使得动画生涩。

我试过了：

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

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

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

Answer 1

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

1. 将新值存储在临时变量中
2. 将ngFor集合设置为空集合
3. 当空集合的动画完成时，将集合更新为存储在 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>