Ionic-framework: Ionic 2 Page Transition slide right-to-left and slide-left-to-right

[wrughony]

Short description of the problem:

Have page containing a navbar with 2 buttons A (Page 1) and B (Page2).
Button A is situated from at right and Button B on the left.
Button A navigates to Page 1 and Button B to Page 2,

By clicking, Button A it slides from left-to-right, to display Page 1.
Returning back from Page 1 to Home Page, it's slides from right-to-left but doesn't go to the Home Page. ---> No error on console

By clicking, Button B it slides from right-to-left, to display Page 2.
Returning back from Page 2 to Home Page, it's slides from left-to-right and goes to home page.

What behavior are you expecting?

The expected behavior is when I go from Home Page to Page 1, I click on button A there should be a slide transition from left-to-right and when returns back I should slide from right-to-left and the Home Page should be displayed

Steps to reproduce:

Using Plunker Link below:

1. From Home Page click on button Page 1 (available in navBar)
2. The Page will slide from left-to-right
3. Then click back button (available in navBar), the page will slide from right-to-left
4. But the page displayed is not the HomePage

I have used the following:

goToPage1( ) {
    this.nav.push(Page1,{},{animate: true, direction: 'back'});
}

and

goBack() {
    this._navController.pop({animate: true, direction: 'forward'})
}

Which Ionic Version? 2.x

Plunker that shows an example of your issue

Plunker Demo - http://plnkr.co/edit/byUHlM?p=preview

Project on Github that shows an example of your issue

Github Project - https://github.com/wrughony/IonicTest

Run ionic info from terminal/cmd prompt:

Your system information:

Cordova CLI: 6.2.0
Gulp version:  CLI version 3.9.1
Gulp local:   Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.10
Ionic CLI Version: 2.0.0-beta.33
Ionic App Lib Version: 2.0.0-beta.19
OS: Windows 7 SP1
Node Version: v4.3.0

[jgw96]

Hello! Thanks for opening an issue with us! As this seems like more of a support question i will urge that you ask this question on our forum (forum.ionicframework.com). Thanks for using Ionic!

[wrughony]

The question was posted on ionic framework forum and someone replies confirming to have the same issue. it's seems that after a push with back direction a pop with forward direction doesnot work.

[YasirSherzad]

hi , i am facing the same issue , any updates regarding this ??

[raghulrajnkl]

HI, I am also facing same issue, if any alternate solutions?

[sherozejoomun]

@jgw96 Any updates on this issue ?

[anshuman-singh-93]

This worked for me
this.navCtrl.push(Page,{},{animate:true,animation:'transition',duration:500,direction:'forward'})

I am using ionic 3,cordova 6.5 and it worked.it only worked when i have set animation property to 'transition'.

I dont get it why id didn't work for 'md-transition' which is documented in ionic framework

[sherozejoomun]

The following works for me:
this.navController.push(Page,{},{ animate: true, direction: 'back'});`

and to go back

this.navController.pop({animate: true, direction: 'forward'});

Ionic: 2.2.0

[yasir-netlinks]

@anshuman-singh-93 your solution worked for me...but how about going back?

[nolazybits]

Thanks @anshuman-singh-93 your solution work. I had to set the animation to 'transition' too.

[wrughony]

Thanks @anshuman-singh-93 .. works for me too

Closing this issue :)

[vinamjai]

This worked for me
this.navCtrl.push(Page,{},{animate:true,animation:'ios-transition',duration:500,direction:'forward'})
this.navCtrl.pop({animate:true,animation:'ios-transition',duration:500,direction:'back'})
md-transition works up/down while ios-transition works left/right.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.