时间戳

首页 > 解决方案 > 登录弹出窗口后角度动画被阻止

angular - 登录弹出窗口后角度动画被阻止

问题描述

我创建了一个在社交登录失败后触发的动画。它在 chrome 中工作，但在 safari 中没有。在 safari 中也有动画作品。我不知道，为什么。

看下面的视频，我的意思是： 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>

谢谢你的帮助！塔马斯

标签： angularanimationsafari

解决方案

我找到了解决这个问题的方法。需要使用 ngZone。因此，我在成功登录 fb 的情况下调用调度函数。如果我将此函数放入 ngZone.run() 函数中，则它可以正常工作。我的解决方案如下所示：

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

我之前为 NgZone 创建了一个实例。

有关 NgZone 的更多信息：https ://angular.io/api/core/NgZone

推荐阅读