Ionic: How to disable Animation between page


#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});


#4

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

And It’s not working.


#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:


app.html:


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


#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
        }),
        ...
]
...