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

【问题标题】：ionic 4 - change navigation transition direction dynamicallyionic 4 - 动态改变导航过渡方向
【发布时间】：2020-07-12 03:14:52
【问题描述】：

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

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

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

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

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

【问题讨论】：

推到下一个视图时你想要哪个动画？
似乎 router-outlet 确实有这样的属性（动画：布尔，动画：动画），但文档不清楚如何实际使用它；/ionicframework.com/docs/api/router-outlet
我希望能够在导航上下文处于同一层级（如滑动行为）时在横向转换之间切换，同时使用向上和向下转换进行更深入的导航
嘿伙计，你找到解决办法了吗？
@SergeyRudenko 是的，请参阅下面的解决方案

标签： angular transition router ionic4

【解决方案1】：

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

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 属性，并返回您要使用的页面转换

【讨论】：

【解决方案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。

【讨论】：

您只能使用 ionic navController api 水平（默认 ios）或垂直（默认 android）动画。你无法控制所有 4 个方向
是的。此外，我在使用 NavController 时遇到了几个小错误：一个在 iOS 上的“返回”动画后返回后出现白屏，另一个是查询参数行为未得到尊重。可能值得为这些人打开问题。

【解决方案3】：

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

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

【讨论】：