ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
50.91k stars 13.52k forks source link

feat: ion-tabs support navigation animation #23653

Open HyperLife1119 opened 3 years ago

HyperLife1119 commented 3 years ago

Prequisites

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 commented 3 years ago

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 commented 2 years ago

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 commented 1 year ago

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

tetsuwanadam commented 11 months ago

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

WhatsThatItsPat commented 11 months ago

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.

facebook-tab-transition