不使用移动设备时如何禁用自定义 Angular/Ionic 页面转换

Jor*_*len 5 ionic-framework angular

我有一个 Angular/Ionic 应用程序,它可以在本机和 Web(iPhone、Android 和 Web)上运行。我设置了一个自定义页面过渡动画,它在移动设备上看起来不错,但在像桌面这样的大屏幕上看起来很奇怪,所以我想禁用这些动画并像在普通网站上看到的那样进行传统页面加载。

我的app.module导入包含以下行,覆盖传统的滑动动画:

IonicModule.forRoot({
  navAnimation: myTransitionAnimation
}),
Run Code Online (Sandbox Code Playgroud)

我知道Platform以及如何使用它来识别应用程序当前正在运行的内容,如下所示:

this.platform.is('mobile')但这样做只能在app.component.tsnot in app.module.ts... 中使用吗?

所以基本上我的问题是如何最好地在我的app.module.ts(伪代码)中执行以下操作

IonicModule.forRoot({
    if(isMobileDevice) {
        navAnimation: myTransitionAnimation
    } else {
        animated: false //the key/value to disable transition animations
    }
}),
Run Code Online (Sandbox Code Playgroud)

Wro*_*ong 6

我这样做是为了禁用页面动画(在网络和电话中):

import { Animation } from '@ionic/core'
...
IonicModule.forRoot({
      backButtonText: '',
      mode: 'ios',
      navAnimation: (AnimationC: Animation): Promise<Animation> => { return Promise.resolve(new AnimationC()); }
 }),
Run Code Online (Sandbox Code Playgroud)

然后我在打开新页面时用它来制作动画:https : //github.com/Telerik-Verified-Plugins/NativePageTransitions

constructor(
    private nav: NavController,
    private transition: NativePageTransitions
  ) { }

  public push(url: string): void {
    this.transition.slide({ direction: 'up', duration: 350 });
    this.nav.navigateForward(url);
  }
Run Code Online (Sandbox Code Playgroud)

  • 请注意,该插件已被弃用,从 2020 年 12 月 1 日起,任何使用该插件的应用程序都将不再被 Apple 允许(需在商店提交) (2认同)