Блог

У меня возникла проблема с исчезновением и появлением сообщения об ошибке при использовании *ngIf. Затухание работает нормально, но затухание не работает. Вместо этого текст просто исчезает (как если бы для него было установлено значение display:none ), хотя *ngIf не вступает в силу до завершения исчезновения. Я пробовал конвертировать, чтобы использовать строковые перечисления и числовые значения, но получаю тот же эффект. Есть ли проблема с моей конфигурацией анимации?

Связанный 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);
    }
  }
}
 

Проблема в том, что вы полностью удаляете текст, выполняя:

  this.errorMessage = null;
 

Фактическая анимация работает нормально, проблема в том, что вы удаляете отображаемый текст, поэтому вы даже не видите анимацию, поскольку текст сразу меняется (в ничто).

Вы можете понять, что я имею в виду, посмотрев на это:
https://stackblitz.com/edit/angular-ivy-t3ft5x?file=src/app/hello.component.ts

Я просто лечу 'test' так, как вы лечите null

В качестве решения вы можете использовать установщик для текста и логический флаг как:

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

и в вашем шаблоне есть:

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

Таким образом, чтобы добиться того, чего вы хотели, и не удалять текст при установке для ввода значения null, чтобы эффект затухания все еще мог присутствовать.

Вы можете ознакомиться с решением здесь:
https://stackblitz.com/edit/angular-ivy-fwpgcw?file=src/app/form-error.component.ts