angular - Angular 4 动画状态变化

Question

我有一个应用于两个 div 的动画，以使它们进入和退出 void 状态。

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

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

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

Answer 1

更好的方法是使用变更检测 ( 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;
}