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

标签 angular ionic-framework

我有一个 Angular/Ionic 应用程序,可以在 native 和 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
    }
}),

最佳答案

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

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);
  }

关于angular - 不使用移动设备时如何禁用自定义 Angular/Ionic 页面转换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55583239/

相关文章:

java - ionic 应用程序运行时错误 - 找不到类 com.vladstirbu.cordova.plugin.utils.AssetProvider

ionic-framework - Vue-router 推送到命名 View

angular - Nav和NavController的push方法有什么区别

angular - 如何获取 angular2 中的 stateparams 值?

javascript - 如何循环遍历我从 snapshot.val() 收到的数据并将其推送到基于键的数组

angular - 从 Docker 运行 Angular 测试脚本

javascript - Angular Universal,在单击 'refresh' 两次之前应用程序不会加载

javascript - 将路线另存为图像 bing map

javascript - 使用地理坐标,对更靠近用户位置的对象进行排序

javascript - Ionic 2 - LocalStorage 或应用程序中的 Json 存储