Angular анимация блокируется после всплывающего окна входа

Question

Я создал анимацию, которая срабатывает после неудачного входа в социальную сеть. Он работает в chrome, но не в сафари. После этого анимация работает и в сафари. Понятия не имею, почему.

Смотрите следующее видео, что я имею в виду: https://drive.google.com/file/d/1VdaNDjPnh4F2wULHy3CQZ5nvqZcQU33m/view?usp=sharing

1. Я перезагружаю страницу
2. Нажмите кнопку входа в facebook
3. Показать всплывающее окно входа в систему, после чего ничего не произошло
4. Нажмите еще раз кнопку входа в facebook, и анимация работает

В chrome анимация тоже работает с первого раза. Так что эта ошибка будет только сафари.

Это мое определение анимации:

animations: [
    trigger('showConditions', [
      state('show', style({ left: '0' })),
      state('hide', style({ left: '100%' })),
      transition('show <=> hide', [
        animate('0.5s cubic-bezier(0.35, 0, 0.25, 1)')
      ]),
    ]),
    trigger('showSignin', [
      state('show', style({ left: '0' })),
      state('hide', style({ left: '-100%' })),
      transition('show <=> hide', [
        animate('0.5s cubic-bezier(0.35, 0, 0.25, 1)')
      ]),
    ])
  ],

И анимация срабатывает при изменении параметра showConditions:

ngOnInit() {
    this.authSubscription = this.store.select('auth').subscribe((state: any) => {
      if (!!state.error) {
        this.error = state.error;
      }
      if (state.login.showConditions) {
        this.showConditions = state.login.showConditions;
        this.accessToken = state.provider.accessToken;
        this.provider = state.provider.type;
      }
      console.log(this.showConditions);
    });
  }

И я использую эта анимация следующая:

<div class="carousel-item active" [@showSignin]="!showConditions ? 'show' : 'hide'">...</div>

Спасибо за помощь! Тамас

Answer 1

Я нашел решение этой проблемы. Нужно было использовать ngZone. Итак, я вызываю функцию диспетчеризации в случае успешного входа в систему. Если я помещу эту функцию в функцию ngZone.run (), она будет работать нормально. Мое решение выглядит следующим образом:

this.ngZone.run(() => {
                this.store.dispatch(AuthActions.signInWithProviderStart({ accessToken, provider: 'facebook' }));
            });

Я уже создавал экземпляр для NgZone раньше.

Подробнее о NgZone здесь: https://angular.io/api/core/NgZone