IonRouterOutlet has no animation in Ionic React 5.1.1

Ionic Framework
1

I am having some issues with IonRouterOutlet using Ionic React v5.1.1. I have created a new project using the tabs template, and straight out the box I am seeing no animation for page transitions. According to the docs, the RouterOutlet shoudl control transitions.

The IonRouterOutlet component provides a container for Routes that render Ionic “pages”. When a page is in an IonRouterOutlet , the container controls the transition animation between the pages as well as controls when a page is created and destroyed, which helps maintain the state between the views when switching back and forth between them.

Found here

Am I missing something here? I feel like I may be misinterpreting the docs.

2

There is no animation when switching between tabs. That’s by design I believe, replicating what native mobile apps do.

You will see animations if you navigate between other pages. If you create a project based on the list template for example you will see the transition effect when selecting an item in the list.

3

Ah ok thank you for clarifying.

I was hoping I could get a slide in/slide out animation for tab switching out the box. Looks like I’ll have to keep attempting this with other packages.

4

You can create custom animations as well, but I never tried on tab switching.