角4のアニメーション状態の変更

Question

2つのdivにアニメーションを適用して、ボイド状態の内外をアニメーション化しました。

参照：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> 

活字体：状態は、それが最初のアニメーションに適用されていない変更が

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

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

これらのアニメーションが動作し、。私はアニメーションを1ms遅らせることでこれを修正することができますが、これは醜いもので、ちょっとハッキリです。

より良い方法は、変化検出（ChangeDetectorRef）を使用することで、この

Answer 1

達成するための滑らかな印象の方法があります：

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; 
} 

は、