Question

我有一个应用于两个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来解决这个问题，但这很丑陋并且感觉有些笨拙。

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

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

角度4动画状态更改

1 个答案: