TL;DR? How does one get custom page transitions to work in Ionic 5?
I am having an issue using the new Animations in Ionic 5 to create custom page transitions.
My app is a Mobile Point of Sale that runs on a specific android device - not available for the mass public to be run on multiple types of devices. Due to the size/complexity of the app and the specifications of the device it can be laggy at times. To counter this, we implemented custom animations to create a perceived performance. However thanks to the latest version of Ionic, the overall performance has improved for the app - so many thanks to the Ionic Team. We still however need the custom animations in the app.
I have been able to get the modal animations to work thanks to help received in a previous post that I opened and closed. I have tried to use that same logic in my page animations but am not having much luck.
What I am trying to do is implement a page transition similar to that of iOS, whereby the current page will slide out and the new page will slide in. I have had some luck on this in that it applies the animation correctly. The animation however plays both the leave and enter animation at the same time which causes a ‘morphing’ of the 2 sets of markup on the 2 pages. So everything goes funky.
I have tried to implement it using this logic, but have had no success .
I have created a demo project on github to demonstrate this issue. If somebody could perhaps help me with this it would be most appreciated. There is a README.me describing how to re-create the issue.
This is a v5 project, using Angular 8 and Capacitor.
This is what I have been able to get to work. It is animating the pages, however it is animating them in the wrong order (it is showing the page to add on-top and then animating it out. Then once the animation is complete it just magically shows the correct page).
Additionally, it seems like it is morphing the 2 pages in the animation so the content is being displayed incorrectly on the view.
Please note, the error being displayed at the end has to do with a seperate API call being made, not the animation itself.
I had a look at your page transition example and it works well if I run it. But when I try do the same in my own application, setting the navAnimations option doesn’t seem to have the same effect - it still uses the default animations.