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 毫秒来解决这个问题，但这很难看，而且感觉有点老套。

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

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

Angular 4个动画状态变化

Angular 4 animation state changes

angular

web-animations

angular-animations