logo标签列表

Ionic 4 - 动态更改导航过渡方向

angulartransitionrouterionic4
4
我希望能够动态地控制导航转换方向。在这篇文章中，我发现了如何强制使用安卓或iOS默认转换的方法。参考链接：https://forum.ionicframework.com/t/page-transition-direction-in-ionic-4/148518/5。
    IonicModule.forRoot({
        rippleEffect: false,
        // TODO:
        // navAnimation: override here
    }),

有没有一种方法可以在转换开始之前从组件内部设置转换方向？
推向下一个视图时，您想要哪种动画效果？ - CodeChanger
1
似乎router-outlet确实有这样一个属性（animate: boolean，animation: Animation），但是文档不清楚如何实际使用它；/https://ionicframework.com/docs/api/router-outlet - Sergey Rudenko
我希望能够在导航上下文处于同一层级时（如幻灯片行为），在侧向转换之间切换，同时使用上下转换来导航更深的层次。 - Han Che
1
嘿，老兄，你有找到解决方案吗？ - Sergey Rudenko
@SergeyRudenko 是的，看下面我的解决方案。 - Han Che
3个回答
2
编辑：我目前没有使用这个解决方案，因为我遇到了一些小问题。也许这仍然可以帮助某些人...

今天刚遇到这个问题。我的用例是分页。例如，在iOS模式下，如果新页面的页数较高，则我希望页面向前翻转，否则我希望页面向后翻转。但是，在这两种情况下，我都想在历史记录中向前移动。

解决方案实际上非常简单。 这里是NavController的文档。以下是我的一行代码：

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

所以，基本上只需使用NavController - 它仍然与Angular路由器一起工作 - 并提供animationDirection选项即可。如果您希望无论他们向哪个方向前进，他们仍然在历史记录中向前移动并可以返回到上一个视图，则使用navigateForward是正确的选择。还有navigateBack。
1
你只能使用Ionic NavController API在水平方向（默认iOS）或垂直方向（默认Android）中进行动画，无法控制所有4个方向。 - Han Che
True。此外，我在NavController中遇到了一些小错误：在iOS上进行“返回”动画后返回白屏幕的一个问题，以及未能遵守查询参数行为的另一个问题。可能值得为这些问题开放问题。 - GoForth
1
我已解决此问题并发布了一篇中等难度的文章。

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

简述：

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

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

您可以编写自定义函数，检查ion-router-outlet或进入页面的任何DOM属性，并返回要使用的页面过渡。

0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接