[V4] How to open a page from bottom to top, without being a modal

Ionic Framework
1

Hi,

I’m trying to make something that should be very common, but I can’t find a solution.

From the initial screen of my app, I would like to open a registration flow in 3 steps.
I would like to open the first screen from bottom to top and then letting the user go through the 3 steps, showing the 3 pages with a horizontal animation.

If I just use the routerLink to open the first step of the registration, the page will enter from the right (bad), but then also the following step will do the same (good).

If I open the first step as a modal, it will enter from bottom to top (good), but if I use the routerLink to go to the second step, the modal will stay there, covering the page.

If I close the modal and open another one, it will disappear from top to bottom and open another one from bottom to top. Not want I want.

So, in order to solve it, I should find a way to:

  1. Have a multi-step modal
  2. Or: Set the first page transition in order to enter from the bottom, opening it with the routerLink and not as a modal

Thanks!

1 Like
2

Here’s a simple example of how you can have navigation inside a modal.

https://codepen.io/corysmc/pen/vMoywo?editors=1010

3

I think he wanted to use normal page transitions, not modals. Is it seems that this is not possible in v4. You can set animations globally but not for a single page.

4

1. Have a multi-step modal
2. Or: Set the first page transition in order to enter from the bottom, opening it with the routerLink and not as a modal

I updated my example to show how you can do custom animations on a per ion-nav basis. It’s quite a lot of code to digest in a codepen (no typescript either :frowning: ), but it’s basically copied and modified from the material design transition docs: https://github.com/ionic-team/ionic/blob/03c1d19e0740365ed109298c013441138b28353f/core/src/utils/transition/md.transition.ts
To modify the animation you just need to pass the ion-nav a property of animation with an AnimationBuilder function: ion-nav: Nav View Component for Ionic Framework Apps

This example now has a modal that includes multi-step navigation (ion nav within a modal) and has cusom animatinos to slide right-to-left with each page (default is slide up on md).

5

Thanks for your help! That’s a possible solution, but I found something cleaner actually: I open a modal and then I use the ion-slider to show the other registration steps with horizontal transition.
Every slide has a component with the content I need.

It doesn’t use the router, but applies automatically the transitions I need.

6

My way of doing this would be create one component and use the animation to show it. Then in that component use arrows with animation to navigate through different divs. Use a form associated with an object and every time you click next it validates that div entries and move to next div in form.

Hopefully the idea is somewhat clear.

7

that is very informative post