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.
My Ionic info:
Ionic CLI : 6.1.0 (/Users/euanscott/.npm-global/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 5.0.4 @angular-devkit/build-angular : 0.803.25 @angular-devkit/schematics : 8.3.25 @angular/cli : 8.3.25 @ionic/angular-toolkit : 2.2.0 Capacitor: Capacitor CLI : 1.5.1 @capacitor/core : 1.5.1 Utility: cordova-res (update available: 0.10.0) : 0.8.0 native-run (update available: 0.3.0) : 0.2.8 System: NodeJS : v12.12.0 (/usr/local/bin/node) npm : 6.11.3 OS : macOS Catalina