앵귤러 애니메이트와 ngFor로 크로스 페이드를 어떻게 할 수 있습니까? 내가 <code>*ngFor</code>에 내가 통과 컬렉션을 업데이트 할 때

Question

나는 애니메이션을 트리거하고 있습니다 :

//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 => * 애니메이션을 지연

시작 : 내 기존 콘텐츠를 부드럽게 페이드 아웃 및/또는 슬라이드 아웃 b .는 efore (또는 동안) 새로운 내용 페이드/슬라이드에서

는 여기에 문제 보여주는 plunkr입니다 : https://plnkr.co/edit/IDE6q6lJ84QI2Zirvn4P?p=preview

Answer 1

나는 그것이 작동하도록 관리를하지만, 해킹 같은 느낌. 대신에 즉시 새로운 값 ngFor 컬렉션의 설정, I는

1. 저장소
2. 변수 임시의 새로운 값은
3. 애니메이션 빈 수집 완료에 빈 컬렉션에 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>