Ionic Page Transition slide right-to-left and slide-left-to-right

Ionic Framework ionic-v3
1

Hello,

I have an ionic navbar with two navigation button(one left and one right).

By default, Ionic2 uses slide-right-to-left when navigating from one page to another,

For the button on the right, the page is transition is slide-right-to-left.
For the button on the left, I want the page to slide from left to right.

In both cases, I am using this.navController.push(SettingsPage);. Is there is a way to obtain the above results for the button on the left ?

Here is a screenshot of my navbar :slight_smile:

image

Thanks in Advance :slight_smile:

2

use below code to perform animation directionā€¦

this.nav.push(TaskListPage, {}, {animate: true, direction: ā€˜forwardā€™});

instead of forward you can use back to achieve desired result.

3

Thanks,

If I uses slide from left to right to enter page, then when I leave it should be slide-right-to-left.

I use,

To page,

goToFactsPage(){
this._navController.push(ScientificFactsPage,{},{animate: true, direction: ā€˜backā€™});
}

To return back,

goBack() {
this._navController.pop({animate: true, direction: ā€˜forwardā€™})
}

but the transition is not working properly :frowning:

Github Repo for my problem

4

by default when you pop, the direction is from left-to-right.

I think here you have to use popTo.

follow this link popTo(view, opts)

EDIT: Sorry I got confused with pop as per pointed by ruwahid, so I removed the statement.

5

But according to Docs,

If you wanted to navigate back from a current view, you can use the back-button or programatically call pop(). Similar to push(), you can also pass navigation options.

6

hey ruwahid

in my case this works fineā€¦

7

Are using the code I push on github ?

8

I tried with my code and it working properlyā€¦

when direction is forward, the transition is from right-to-left and for back it vice-versaā€¦

9

So use push with back direction to enter the page and pop with forward direction to leave the page.

For me the push is OK part
But when I pop with forward direction, it doesnot work
in fact it return me to my current page :frowning:

10

I think that a ā€œpushā€ with back direction doesnā€™t work.

Given Page A, B and C

In my case, if I do a push with back direction from A to B ===> I see Page B but its Page A behinds.

If possible to have a look at my code ==> https://github.com/wrughony/IonicTest

11

after multiple testing what I found is,

  1. many times at first go this code workā€¦but after that, itā€™s not working.
  2. there is major probability where this code (yours and mine too) not works.
  3. if you tried multiple times go forward and go back in browser the UI hangsā€¦ like two overlapped pagesā€¦

I think this might be issue of Ionic too Push/pop animationā€¦ you file this issue on githubā€¦

image
screencapture (1).jpeg1338Ɨ696 78.1 KB

12

Plunker Created: http://plnkr.co/edit/byUHlM?p=preview
Issues Filed: https://github.com/driftyco/ionic/issues/7459

:slight_smile::slight_smile::slight_smile::slight_smile:

13

I am editing my comment, you can use the direction attribute to describe which direction it will slide, but you also need to use the attribute animation: ā€œtransitionsā€, so that the transition works.