Is it possible to animate this.nav.setRoot?

Ionic Framework ionic-v3
1

In my app, after a user logs in, I set the root page as shown below. This page has a menu icon on the left of the navbar to display the menu. How can I animate the page transition?

this.nav.setRoot(AccountsPage);

When I use this.nav.push I get a nice transition but also the “Back” button instead of the menu icon on the AccountsPage (not desirable).

Is is possible to animate this.nav.setRoot?

2 Likes
2 
this.nav.setRoot(Page, {}, {animate: true, direction: 'forward'});

Got the answer from @brandyshea when asking for a feature request -

20 Likes
3

@rdesimone you rock dude! That works like a charm…

4

Very cool, this works, but i try to put animation to “up”, unfortunally, does not work.
:frowning: can you help me?

6

A bit late to the party but…

From the documentation it says: The property animation understands the following values: md-transition, ios-transition and wp-transition.

3 Likes
7

this should be in the official doc ! :slight_smile:

8

Thanks got answer before asking questing, forum improving

9

In ionic 3, I find that the reason push() works, but not setRoot() is because push doesn’t require {animate: true} while setRoot does. So make sure you mention {animate: true} for animation options like this

{ animate: true, animation: ‘wp-transition’, duration: 1000 }

10

The proposed solution allows to animate a single setRoot.
What if I have more than one setRoot to animate?
Is there a way to set a default behavior for every setRoot?

1 Like