Question

我有一个Angular / Ionic应用程序，它可以在本机和Web（iPhone，Android和Web）上运行。我设置了一个自定义页面过渡动画，该动画在移动设备上看起来不错，但在大屏幕（如台式机）上却很奇怪，因此我想禁用这些动画，并像在普通网站上看到的那样具有传统的页面加载功能。

我的app.module导入包含以下行，覆盖了传统的滑动动画：

IonicModule.forRoot({
  navAnimation: myTransitionAnimation
}),

我知道Platform以及如何使用它来识别应用当前正在运行的内容，例如：

this.platform.is('mobile')，但只能在app.component.ts中使用，而app.module.ts中没有...对吗？

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

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

Answer 1

我这样做是为了禁用网页动画（在网络和电话中）：

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

然后在打开新页面时，我用它来制作动画：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);
  }

Answer 2

我使用的是 Ionic 5。我喜欢它。

import { Animation } from '@ionic/core'
...
IonicModule.forRoot({
      backButtonText: '',
      mode: 'ios',
      navAnimation: _ => new AnimationController().create()
})

这对我有用。

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

2 个答案: