Angular 角度4动画状态更改

我有一个动画应用于两个div，以使它们在void状态中和在void状态中都具有动画效果

见：

Html:

但是，当状态更改时，这些动画将不会应用于第一个动画。我可以通过将动画延迟1毫秒来解决这个问题，但这很难看，感觉有点不舒服

---

有没有更简洁的方法来实现这一点

更好的方法是使用更改检测（

ChangeDetectorRef

）：

 <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);*/

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