Implement fade-through transitions for android navigation animation

[EKashpersky]

Issue number: no issue

---

What is the current behavior?

Current transition animation is a bottom-up transition, suitable for modals or bottom-sheet entering.

What is the new behavior?

New transition is right to left fade-through, perfectly suitable for transition between pages.

Does this introduce a breaking change?

• [ ] Yes
• [x] No

Other information

Repo with examlpe

UPD: Greetings!

On my main job we faced issues with page transition while using regular ionic transitions between pages. Header was out of sync with content, overlapping pages, improper transitions. I checked that we don't background-color on ion-header, that ion-toolbar has proper --background along with ion-content and ion-footer, but at the end of the day I failed to find a proper solution.

I bailed out to make a simple custom animation, taking iosTransitionAnimation as the starting point.

Making a simple transition of whole screen solved the issue we had. But implementing a custom transition means addressing both platforms, so I took a peek at mdTransitionAnimation, and it felt off. I quickly checked how android navigation works on my device, and found that these two are completely different. When going to next pages I observe rather horizontal shift, but in ionic next page comes from bottom-up, – vertical shift.

Being unable to debate which is right, I thought that this fade-through is a suitable transition for navigation back and forward, leaving behind vertical shift in favour of horizontal shift, and implemented it as a main transition between pages in our app for android.

And this is basically a cherry-pick/back-port attempt into ionic mainstream. Looking forward to know what you think of it. Thanks!

UPD2: add clarity to the text

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ionic-framework	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 2, 2025 0:30am

[thetaPC]

Thank you for the PR!

However, we require all PRs to be associated with an issue for us to look into this more. Please create a new issue and link it to this PR.