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

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

[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

[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.