Transiction page on setRoot

Ionic Framework ionic-v3
1

Is it possible to run an animation in page transition?

2

Yes, take a look over here at the API docs: http://ionicframework.com/docs/api/navigation/NavController/. You could pass in an argument to make a transition happening. Take a look at the nav options. You will see there’s a met called animate. Pass it as an option and you should be able to call nav.setRoot with an animation.

Try this:

this.nav.setRoot(page.component, {}, { animate: true });

3

i’t try this:
public abreCarrinho(){
this.nav.setRoot(CarrinhoPage, {animate: true, duration: 3000});
}

no success!

4

You missed the empty object for the navparams. Now you’re passing your object to the navparams instead of to the options object :wink:

5

The property ‘animation’ understands the following values: md-transition, ios-transition and wp-transition.
and the propertyes: direction, easing, what values ?

6

Please read carefully. You can pass several things to the navController. The component is mandatory, but navparams and navoptions are optional. If you only pass in navoptions, it get’s treated as the navparams (since that’s the first optional paramater). Therefore, you should add an empty object to the navparams as I already said, like this:

this.nav.setRoot(page.component, {}, { animate: true, duration: 3000 });

watch the empty object do it’s work!

7

i know this, its worked here… i say in properties “direction” and “easing”, what values i use ? have no values on docs

8

Okay but you didn’t say it was working. You could just use only animate: true. The values inside the navOptions are optional. Just leaving them empty makes them fall back to default values. So no need to set them.

9

ok thanks my friend!

10

You’re welcome. If you think your question was solved, please mark the question as solved. That way it’s easier to found for other forum searchers out there when searching for a similar issue :

11

you will need to import the platform from ionic-angular and add it to the constructor

  this.platform.ready().then(() => {
    this.navCtrl.setRoot(HomePage, {}, { animate: true, duration: 300 });
    });