Ionic4 native page transitions not working on router navigate

Question

The page transitions are not working when navigating to a new url.

Ive tried all the possibilities of navigation the ionic angular like routerLink href router.navigateByUrl(). I also tried with NativePageTransition plugin.

app.component.html:

<ion-app>
  <ion-content>
      <ion-router-outlet></ion-router-outlet>
      <ion-tabs>
        <ion-tab-bar slot="bottom">
          <ion-tab-button
            *ngFor="let tab of tabs"
            [attr.tab]="tab.action ? null : tab.path"
            (click)="tab.action ? handleTabClick(tab) : null">
            <ion-label>{{ tab.name }}</ion-label>
            <ion-icon [name]="tab.icon"></ion-icon>
          </ion-tab-button>
        </ion-tab-bar>
      </ion-tabs>
  </ion-content>
</ion-app>

app-routing.module.ts:

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', redirectTo: 'explore', pathMatch: 'full' },
  { path: 'explore', loadChildren: './explore/explore.module#ExplorePageModule' },
  { path: 'business', loadChildren: './business/business.module#BusinessPageModule' },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

explore.page.html:

<app-header [hideTags]="hideTags"></app-header>
<ion-content style="background: white;height: 100%;" (scroll)="onScroll($event)">
  <ion-card
    type="button"
    mode="ios"
    routerLink="/business"
    routerDirection="forward"
    *ngFor="let business of businesses">
    <ion-img [src]="business.images[0]"></ion-img>
  </ion-card>
</ion-content>

I want the page of /business to slide from right to left on top of the previous one.

Answer 1

There are two ways to accomplish this. The first way is using the Angular Animation. The second way is the Native Page Transitions plugin.

For the Angular animations, follow the the steps below. You can also check this tutorial:

1. Import the BrowserAnimationsModule.

   import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
   
   imports: [
       BrowserAnimationsModule, 
       BrowserModule,
       AppRoutingModule
   ]
   

2. Wrap the Router Outlet

    import { slider } from './route-animation.ts';
   
   @Component({
     selector: 'app-root',
     animations: [ slider ]
   })
   
   prepareRoute(outlet: RouterOutlet) {
     return outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation'];
   }
   

3. Create route-animation.ts file

   export const slider =
     trigger('routeAnimations', [
       transition('* <=> *', [
         query(':enter, :leave', [
           style({
             position: 'absolute',
             top: 0,
             left: 0,
             width: '100%'
           })
         ], { optional: true }),
         query(':enter', [
           style({ left: '-100%'})
         ]),
         group([
           query(':leave', [
             animate('600ms ease', style({ left: '100%'}))
           ], { optional: true }),
           query(':enter', [
             animate('600ms ease', style({ left: '0%'}))
           ])
         ]),
         // Normalize the page style... Might not be necessary
   
         // Required only if you have child animations on the page
         // query(':leave', animateChild()),
         // query(':enter', animateChild()),
     ]),
   ]);
   

Using Native Page Transitions

You can also use the Native Page Transitions plugin also. Even though it is not maintainable right now, but you can give it a try if you want.

Not sure why it didn't work with you, but please make sure doing these steps:

1. Install the plugin: ionic cordova plugin add com.telerik.plugins.nativepagetransitions and npm install @ionic-native/native-page-transitions

2. Add it to the provider list in the app.module.ts:

   import { NativePageTransitions } from '@ionic-native/native-page-transitions/ngx';
   ...
   providers: [NativePageTransitions]
   ...
   

3. When navigating, use this

   import { NativePageTransitions, NativeTransitionOptions } from '@ionic-native/native-page-transitions/ngx';
   
   constructor(private nativePageTransitions: NativePageTransitions) { }
   
   ionViewWillLeave() {       
     let options: NativeTransitionOptions = {
       direction: 'left',
       duration: 500,
       slowdownfactor: 3,
       slidePixels: 20,
       iosdelay: 100,
       androiddelay: 150,
       fixedPixelsTop: 0,
       fixedPixelsBottom: 60
     }
   
     this.nativePageTransitions.slide(options);
   
   }
   

   Or before navigating:

   this.nativePageTransitions.slide(options);
   router.navigate(['myPath']);
   

You can play with the config to meet your best slide. And don't forget that you will need to slide to the other direction when going back from a page.