ionic4/ionic5实现页面右侧滑入动画效果

直接贴代码，在app.module.ts文件

ionic4

import { MyApp } from "./app.component";
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { RouteReuseStrategy } from '@angular/router';
import { AppRoutingModule } from './app-routing.module';
import { IonicGestureConfig } from './IonicGestureConfig';
import { CommonModule } from '@angular/common';
import { Animation } from '@ionic/core';
@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    BrowserModule,
    CommonModule,
    IonicModule.forRoot({
      backButtonText: '',
      mode: "md",
      navAnimation: (AnimationC: Animation, baseEl: any, position?: any): Promise<Animation> => {
        const baseAnimation = new AnimationC();
        const hostEl = (baseEl.host || baseEl) as HTMLElement;

        const wrapperAnimation = new AnimationC();
        const wrapperAnimation2 = new AnimationC();
        if (position.direction == "forward") {
          wrapperAnimation.addElement(position.enteringEl);
          wrapperAnimation.fromTo('transform', `translateX(100%)`, 'translateX(0px)');
          wrapperAnimation.fromTo('opacity', 0.3, 1);

          wrapperAnimation2.addElement(position.leavingEl);
          wrapperAnimation2.fromTo('transform', `translateX(0)`, 'translateX(-50%)');
          wrapperAnimation2.fromTo('opacity', 1, 0.5);
        }

        if (position.direction == "back") {
          wrapperAnimation.addElement(position.leavingEl);
          wrapperAnimation.fromTo('transform', `translateX(0)`, 'translateX(100%)');
          wrapperAnimation.fromTo('opacity', 1, 0);

          wrapperAnimation2.addElement(position.enteringEl);
          wrapperAnimation2.fromTo('transform', `translateX(-90%)`, 'translateX(0)');
          wrapperAnimation2.fromTo('opacity', 0.5, 1);
        }
        return Promise.resolve(baseAnimation
          .addElement(hostEl)
          .easing('cubic-bezier(.36,.66,.04,1)')
          .duration(600)
          .add(wrapperAnimation)
          .add(wrapperAnimation2));
      }
    }),
    AppRoutingModule
  ],
  bootstrap: [MyApp],
  entryComponents: [],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ]
})
export class AppModule { }

ionic5

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { createAnimation, IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot({
      mode: 'md',
      navAnimation: (baseEl: any, position?: any) => {
        const hostEl = (baseEl.host || baseEl) as HTMLElement;
        const animation1 = createAnimation();
        const animation2 = createAnimation();
        if (position.direction == "forward") {
          animation1.addElement(position.enteringEl).fromTo('transform', `translateX(100%)`, 'translateX(0px)').fromTo('opacity', 0.3, 1);
          animation2.addElement(position.leavingEl).fromTo('transform', `translateX(0)`, 'translateX(-50%)').fromTo('opacity', 1, 0.5);
        }
        if (position.direction == "back") {
          animation1.addElement(position.leavingEl).fromTo('transform', `translateX(0)`, 'translateX(100%)').fromTo('opacity', 1, 0);
          animation2.addElement(position.enteringEl).fromTo('transform', `translateX(-90%)`, 'translateX(0)').fromTo('opacity', 0.5, 1);
        }
        const baseAnimation = createAnimation().addElement(hostEl).easing('cubic-bezier(.36,.66,.04,1)').duration(600)
        baseAnimation.addAnimation(animation1).addAnimation(animation2);
        return baseAnimation;
      }
    }),
    AppRoutingModule
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

关键代码navAnimation那部份贴上就可以用了。

(原创文章，转载请注明出处，谢谢)