Angular 动画 *ngIf + opacity 仅适用于一个方向

Question

我在使用 *ngIf 时出现淡入淡出错误消息的问题。淡入工作正常，但淡出不起作用。相反，即使 *ngIf 直到淡出完成才生效，文本也会消失(就像设置为 display:none 一样)。我尝试转换为使用字符串枚举和数值，但得到了相同的效果。我的动画配置有问题吗？
Linked stackblitz 使用的是 Angular 10，我使用的是 Angular 11.0.7(最新)。
https://stackblitz.com/edit/angular-ivy-bsuupd?file=src/app/form-error.component.ts

@Component({
  selector: "app-form-error",
  animations: [
    trigger("fadeInOut", [
      state("false", style({ opacity: 0 })),
      state("true", style({ opacity: 1 })),
      transition("true <=> false", animate(500))
    ])
  ],
  template: `
    <p>showError is {{ showError }}</p>
    <p>fadeError is {{ fadeError }}</p>
    <ng-container *ngIf="showError">
      <h1 [@fadeInOut]="{ value: fadeError }">{{ errorText }}</h1>
    </ng-container>
  `
})
export class FormErrorComponent implements OnInit, OnChanges {
  @Input() errorText: string;
  showError: boolean = false;
  fadeError: boolean = false;

  constructor() {}

  ngOnInit(): void {}

  ngOnChanges(changes: SimpleChanges): void {
    if (this.errorText) {
      this.showError = true;
      setTimeout(() => {
        // lets fade in begin after ngIf takes effect (works fine)
        this.fadeError = true;
      });
    } else {
      this.fadeError = false; // this should start fade, but just hides the text immediately
      setTimeout(() => {
        // delays the ngIf until fade out is done
        this.showError = false;
      }, 500);
    }
  }
}

Answer 1

问题是您正在通过执行以下操作完全删除文本:

 this.errorMessage = null;

实际动画工作正常，问题在于您正在删除要显示的文本，因此您甚至看不到动画，因为文本会立即更改(变为无)。
你可以看看我的意思:
https://stackblitz.com/edit/angular-ivy-t3ft5x?file=src%2Fapp%2Fhello.component.ts
我只是在治疗 'test'如您所愿 null
作为解决方案，您可以使用文本 setter 和 bool 标志作为:

  errorTextToShow: string;
  showErrorText: boolean;
  @Input() set errorText(value: string) {
    if(!!value){
      this.errorTextToShow = value;
    }
    this.showErrorText = !!value;
  }

并在您的模板中有:

  <h1 [@fadeInOut]="{ value: fadeError }">{{ errorTextToShow }}</h1>

这样就可以达到你想要的效果，并且在将输入设置为空时不要删除文本，这样淡出效果仍然可以存在。
您可以在此处查看解决方案:
https://stackblitz.com/edit/angular-ivy-fwpgcw?file=src%2Fapp%2Fform-error.component.ts