How to implement a custom transition between views?
Something similar to the properties " enterAnimation" and " leaveAnimation" in the Modal but for a single view transition, not for the entire application.
Options already tried:
- NavOptions into NavController accepts an “animation” property, but it does not accept a custom animation. Per domcumentation: " The property ‘animation’ understands the following values:
Documentation Link: https://ionicframework.com/docs/v3/api/navigation/NavController/
- Ionic config accepts a “navAnimation” property, but it does affect the entiry application, not just one page.
Per Documentation: “Overrides the default “animation” of all
ion-router-outletacross the whole application.”
Documentation Link: https://ionicframework.com/docs/angular/config
CSS transition: the leaving view is hidded before the transition ends.
Ionic v3 Page Transitions: Seems to be deprecated.
Tutorial Link: https://rafalradziszewski.pl/blog/ionic-custom-transitions
Migration Link: How to migrate custom animation to Ionic 4?
- Angular Animations: After try the example in the Angular guide, got several error related with the " Querying the view containers" (https://angular.io/guide/route-animations#querying-the-view-containers). those error indicates that the “:enter” query returned 0 elements. I supposed that the issue is because in ionic we use the “ion-router-outlet” instead the angular “router-outlet” and the different implementation brokes the animation flow.
Documentation Link: https://angular.io/guide/route-animations
Thanks in advance.
Ionic CLI : 6.4.0 (C:\Users\Diego\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 5.0.7
@angular-devkit/build-angular : 0.803.26
@angular-devkit/schematics : 8.3.26
@angular/cli : 8.3.26
@ionic/angular-toolkit : 2.2.0
Cordova CLI : 9.0.0 (firstname.lastname@example.org)
Cordova Platforms : none
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 4 other plugins)
cordova-res : 0.10.0
native-run : 0.3.0
Android SDK Tools : 26.1.1 (C:\Program Files (x86)\Android\android-sdk)
NodeJS : v12.16.1 (C:\Program Files (x86)\nodejs\node.exe)
npm : 6.13.7
OS : Windows 10