Angular 4 Animationsstatus ändert sich

Question

Ich habe eine Animation auf zwei divs angewendet, um sie in den leeren Zustand zu animieren.

See: https://plnkr.co/edit/uCdBafYG7NZxVVppiTpo?p=preview

Html:

<div *ngIf="shown" [@flipEnterExitAnimation]="state"> 
     <div style="border: 1px solid black">Front</div> 
    </div> 

    <div *ngIf="!shown" [@flipEnterExitAnimation]="state"> 
     <div style="border: 1px solid black">Back</div> 
    </div> 

Typoskript:

 this.state = this.state === 'backwards' ? null : 'backwards'; 
     this.shown = !this.shown; 

     /* 
    setTimeout(() => { 
     this.shown = !this.shown; 
     }, 
     1);*/ 

Diese Animationen arbeiten, aber wenn sich der Zustand ändert sich auf die erste Animation nicht angewendet wird. Ich kann das beheben, indem ich die Animation für 1ms verzögere, aber das ist hässlich und fühlt sich ein bisschen hacky an.

Gibt es eine sauberere Weg, dies

Answer 1

Eine bessere Möglichkeit, zu erreichen, ist Änderungserkennung zu verwenden (ChangeDetectorRef):

import { ChangeDetectorRef } from '@angular/core'; 

// snip 

private changeDetectorRef: ChangeDetectorRef; 

constructor(changeDetectorRef: ChangeDetectorRef) { 
    this.changeDetectorRef = changeDetectorRef; 
} 

beginAnim() { 
    this.state = this.state === 'backwards' ? null : 'backwards'; 
    this.changeDetectorRef.detectChanges(); 
    this.shown = !this.shown; 
}