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