Unexpected page transition animation on child route

I am using Ionic v4-beta.18 using the updated lazy loading tabs that were changed in beta.18. This is the following structure for routing in my home page module:

const routes: Routes = [
      {
        path: '',
        component: HomePage,
        children: [
        ]
      },
      {
        path: 'artist/:artist',
        component: ArtistPage
      }
]

Where a url of tabs/home would load the HomePage component and when a user selects an artist that is displayed on that page, it should route to the artist page using:

this.navCtrl.navigateForward(tabs/home/artist/${this.artist.artistUID}));

The page loads correctly, but the animation is different than what I expected. I see an animation sort of like a modal popover instead of a transition to the next page that slides in from the right to left which I was expecting by using the navigateForward() method.

Here’s the animation i see, instead of the “slide-in” animation, is my route nesting incorrect? What else would you need to see to help fix this? Thanks!

Just found out that this is the expected animation for Material Design, not a slide from right to left transition as found in iOS!

1 Like