(Ionic 5) How to create a Custom Page Transition for a single page (Not a Modal)

Ionic Framework
1

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:

  1. NavOptions into NavController accepts an “animation” property, but it does not accept a custom animation. Per domcumentation: " The property ‘animation’ understands the following values: md-transition , ios-transition and wp-transition ."

Documentation Link: https://ionicframework.com/docs/v3/api/navigation/NavController/

  1. 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-nav and ion-router-outlet across the whole application.”

Documentation Link: https://ionicframework.com/docs/angular/config

  1. CSS transition: the leaving view is hidded before the transition ends.

  2. 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?

  1. 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 Info:

Ionic:

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:

Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : none
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 4 other plugins)

Utility:

cordova-res : 0.10.0
native-run : 0.3.0

System:

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

1 Like
2

Anyone?

Is it posible?

3

Have you found a way to make this possible?

4

No, I didn’t. ended up using angular animations into the pages, but between pages i didn’t find any solution.

5

If you use IonicModule.forRoot({navAnimation: anyAnimation }) you can check which page is it in the anyAnimation class.

6

For whom has similar question in 2022,

See this : feat: Per page animation configurability · Issue #18209 · ionic-team/ionic-framework · GitHub

this.navController.navigateForward('/child', { animation: myAnimation });