Ionic: How to disable Animation between page

Ionic Framework ionic-v3
1

Hi, I want disable the right to left animation on ios

When I do navController.push(MyPage)

or

@ViewChild(Nav) nav: Nav;
this.nav.setRoot(MyPage);

Any Idea ?

2

There is a pageTransition config item, but the docs do not list the options.

3

navController.push(MyPage,{},{animate:false});
or
this.nav.setRoot(MyPage,{},{animate:false});

1 Like
4

Thx, but I have already try to use this parameters.

And It’s not working.

image
Screen Shot 2016-11-28 at 08.44.33.png1652Ă—416 53.1 KB

5

im using this method and working super fine
this.navCtrl.push(RequestResultPage, { Query: keyword }, { animate: false });

if you can provide some code to show how is not working mean it would be helpful

6

My code for my side menu

appmponent.ts:

image
Screen Shot 2016-12-01 at 09.56.36.png2060Ă—1586 337 KB

app.html:
image
Screen Shot 2016-12-01 at 10.02.42.png1478Ă—838 88.6 KB

7

i think setRoot have no animation by default? what are you trying to do?

8

it’s my global left side navigation menu.

And when I click on one of menu item to navigate I have a left to right slide animation on ios and bottom to top on andorid.

9

your left menu is a side menu that slide out when you press menu button on header? by default there should be no animation when you navigate by setRoot…

10

Yes you are right ! It’s working for my menu but sometimes I do :

this.navCtrl.pop().then(() =>
{
this.navCtrl.push(item.page, {}, {animate: false});
});

in this case it’s not working.

11

because .pop is also playing animation? try using this.navCtrl.pop({animate:false}) ?
and i think you dont need the then statement…

12

Awsome !! It’s working fine ! :wink:

Thx

13

glad im able to help…

14

My question is not identical but very close to the topic of this posting.

How can i disable animation on page navigation in general or at least for the automatically added back navigation triggert by the arrow in the header?
I know how to disable it if i push a new page, but for the back arrow i have not found a solution.

Sadly page animations are causing major visual problems on the windows platform, so i want to get rid of them for now.

2 Likes
15

@A1development try to use this code:

import { Navbar } from 'ionic-angular';

export class myClass {
    @ViewChild(Navbar) navBar: Navbar;

    ionViewDidLoad() {
        this.setBackButtonAction()
    }

    //Override the default back btn action
    setBackButtonAction(){
       this.navBar.backButtonClick = () => {
          this.navCtrl.pop({animate:false})
       }
    }
}
16

@A1development, you can disable animations for the full app in app.module.ts, in the imports section:

...
 imports: [
        ...
        IonicModule.forRoot(MyApp, {
            animate: false // disable animation
        }),
        ...
]
...
3 Likes
17

But what if I need to remove only page transition animation. I want animation on side menu and all other things