ionic4.x ion-menu制作侧面菜单，页面多次跳转之后无法打开，出现了动画异常，求解？

Question

调试中js出现：Error: ASSERT: _before() should be called while animating

app.component.html代码：

<ion-app>
        <ion-menu menuId="first" side="start" >
                <ion-content>
                        <ion-list>
                                <ion-item style="text-align:center;" lines="none">
                                        <ion-label><img src="../../../assets/icon/navigation/my_data_plan.png"
                                                        style="width:64px;height:64px;" /></ion-label>
                                </ion-item>
                                <ion-item style="text-align:center;">
                                        <ion-label>{{account}}
                                                <span *ngIf="isLogined" (click)="logout()"> &nbsp; {{loginOut}}</span>
                                                <span *ngIf="!isLogined" (click)="gotoLoginPage()">{{login}}</span>
                                        </ion-label>
                                </ion-item>

                                <ion-menu-toggle auto-hide="false">
                                        <ion-item *ngFor="let navItem of navList" (click)="gotoPages(navItem.url)">
                                                <ion-avatar slot="start">
                                                        <img src="{{navItem.icon}}">
                                                </ion-avatar>
                                                <ion-label>{{navItem.title }}</ion-label>
                                        </ion-item>
                                </ion-menu-toggle>
                        </ion-list>
                </ion-content> 
        </ion-menu>

        <ion-header>
                <ion-toolbar color="primary">
                        <ion-buttons slot="end">
                                <ion-button>
                                        <img src="../../../assets/icon/header/reset.png"
                                                style="width:30px;height:30px;" />
                                </ion-button>
                                <ion-button>
                                        <img src="../../../assets/icon/header/off.png"
                                                style="width:30px;height:30px;" />
                                </ion-button>
                                <!-- <ion-button (click)="openMenu()" style="border:1px solid #fff;--color:#fff;">
                                </ion-button> -->
                                <ion-menu-button style="border:1px solid #fff;--color:#fff;"></ion-menu-button>
                        </ion-buttons>
                        <ion-title>Pokefi admin</ion-title>
                </ion-toolbar>
        </ion-header>
        <ion-router-outlet main></ion-router-outlet>
</ion-app>

app.component.ts代码：
gotoPages(url: string) {
    this.menu.close('first');
    location.reload();
    if (url === Routes.Settings) {
      this.router.navigate([url])
    } else if (url === Routes.Data_Plan_List || url === Routes.My_Data_Plans) {
      this.router.navigateByUrl(url);
      //this.router.navigate([this.isLogined ? url : Routes.User_Login])
    } else {
      if (this.isLogined) {
        this.router.navigate([url])
      } else {
        this.toastService.popToast('no_permission_warning', Ion_Color.Dark)
        this.router.navigate([Routes.User_Login])
      }
    }
  }

Answer 1

源于chatGPT仅供参考,如有帮助,望采纳谢谢!

根据您提供的代码和错误信息，动画异常可能是由于多次跳转页面后重新加载导致的。在 `gotoPages()` 方法中，您使用了 `location.reload()` 来刷新页面，这可能会导致 Ionic 的动画处理出现问题。

解决此问题的方法是移除 `location.reload()`，只保留正确的页面导航逻辑。请更新 `gotoPages()` 方法如下：

```typescript
gotoPages(url: string) {
  this.menu.close('first');

  if (url === Routes.Settings) {
    this.router.navigate([url]);
  } else if (url === Routes.Data_Plan_List || url === Routes.My_Data_Plans) {
    this.router.navigateByUrl(url);
  } else {
    if (this.isLogined) {
      this.router.navigate([url]);
    } else {
      this.toastService.popToast('no_permission_warning', Ion_Color.Dark);
      this.router.navigate([Routes.User_Login]);
    }
  }
}

通过删除 location.reload()，您将保留页面导航逻辑，并希望能够解决动画异常问题。如果问题仍然存在，请确保您的 Ionic 版本和相关依赖库的版本是兼容的，并检查是否存在其他与动画或页面跳转冲突的代码。

希望这可以解决您的问题。如果您还有其他疑问，请随时提问。

```