feat: ion-tabs support navigation animation

[HyperLife1119]

Prequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

let ion-tabs component support navigation animation, and supports routing navigation animation.

Describe the Use Case

Allow developers to customize the animation when tab switching.

<ion-tabs [animation]="animation"></ion-tabs>

Describe Preferred Solution

Add an animation property to the ion-tabs component.

Describe Alternatives

No response

Related Code

No response

Additional Information

No response

[HyperLife1119]

I think this feature is very important, it can help developers achieve similar Android native view pager switching animation effect. Hope to see its implementation in the v6 version. @liamdebeasi

[davideas]

I also agree to have an animation in this component: currently content just pop in from nowhere when tab is tapped having no clue if it comes from left or right., which makes double thinking: Did a new page appear or I am still in same tabs page?

[digaus]

Also interested in this feature. Would be nice if someone could look into it.

[tetsuwanadam]

Would love to be able to use this in my own apps as well.

[WhatsThatItsPat]

I would like a subtle version of this, which is perhaps different than the requests above.

Facebook has a subtle transition when switching tabs which comes in handy when you're viewing the same content in different tab stacks. In this GIF, we're looking at the Ionic page under both the home tab and the menu tab. The transition helps the user understand that the tabs have been changed. The direction of the transition depends on whether the new tab is to the right or left of the current tab.

[singatias]

I'm not sure if this is related, but when using custom animations with <ion-router-outlet [animation]="customPageAnimation"> inside <ion-tabs>, the function never gets called. Adding a debugger; statement or console.log for debugging in my customPageAnimation function doesn't trigger. Brand new project using angular 18 and ionic 8.

[Trevor-143]

I'm not sure if this is related, but when using custom animations with <ion-router-outlet [animation]="customPageAnimation"> inside <ion-tabs>, the function never gets called. Adding a debugger; statement or console.log for debugging in my customPageAnimation function doesn't trigger. Brand new project using angular 18 and ionic 8.

I have just spent some time trying to make it work with no success.