ionic 4 - 动态改变导航过渡方向

Question

我希望能够动态控制导航过渡方向。

在这个 post 中，我发现了如何强制执行 android 或 ios 默认转换。

https://forum.ionicframework.com/t/page-transition-direction-in-ionic-4/148518/5

    IonicModule.forRoot({
        rippleEffect: false,
        // TODO:
        // navAnimation: override here
    }),

有没有一种方法可以在过渡开始之前从组件内部设置过渡方向？

Answer 1

我使用 ionic navController 和选项 nav.navigateForward、nav.navigateRoot 和 nav.navigateBack。这些挂钩到 angular 路由器执行必要的定向动画。

它没有很好的记录，但是有一些很好的例子：https://www.freakyjolly.com/ionic-4-latest-angular-routing-in-ionic-4-application/#more-2025

Answer 2

编辑： 我目前没有使用这个解决方案，因为我遇到了一些奇怪的小错误。也许这仍然可以帮助某人...

今天刚运行到此。我的用例是分页。例如，在 iOS 模式下，如果点击的新页面更高，我希望页面向前翻，否则我希望页面向后翻。然而，在这两种情况下，我都想在历史上前进。

解决方法其实超级简单。 Here are the docs 对于 NavController。这是我的单行：

this.navController.navigateForward(`/blog/home/${page}`,
  { queryParamsHandling: 'merge', animationDirection: page > this.currentPage ? 'forward' : 'back' });

所以，基本上只使用 NavController - 它仍然适用于 Angular 路由器 - 并提供 animationDirection 选项。

如果你愿意，使用navigateForward是正确的一步，所以不管他们往哪个方向走，他们仍然在历史上前进，可以回到以前的观点。还有navigateBack也是。

Answer 3

我已经解决了这个问题并发布了一篇中篇文章

https://medium.com/@hanche2001/how-to-change-between-android-and-ios-page-transitions-dynamically-in-ionic-ec1256a692f5

TLDR

IonicModule.forRoots 允许您使用 navAnimation 函数配置和强制执行预定义的过渡动画

navAnimation 函数接收进入和离开页面的引用以及使用的 ion-router-outlet

您可以编写一个自定义函数来检查 ion-router-outlet 或进入页面的任何 DOM 属性以及 return 您要使用哪个页面转换

ionic 4 - 动态改变导航过渡方向

ionic 4 - change navigation transition direction dynamically

router

transition

angular

ionic4