Implement fade-through transitions for android navigation animation by EKashpersky · Pull Request #30388 · ionic-team/ionic-framework

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
  • 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