您可以调整离子配置以实现此目的：

import { IonicModule } from 'ionic-angular';

@NgModule({
  ...
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp, {
       modalEnter: 'modal-slide-in',
       modalLeave: 'modal-slide-out',
       pageTransition: 'ios-transition'
      }
    }, {}
  )],
  ...
})

参见https://ionicframework.com/docs/api/config/Config/作为参考。
对于单页过渡，您可以用途：

import { Component } from '@angular/core';
import { NavController, ModalController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, public modalCtrl: ModalController) {

  }

  openModal() {
    const modal = this.modalCtrl.create('ContactPage', {}, { enterAnimation: 'modal-slide-in', leaveAnimation: 'modal-slide-out' });
    modal.present();
  }

  openPage() {
    this.navCtrl.push('ContactPage', {}, { animation: 'ios-transition' });
  }

}

注意：没有内置的模式转换可以从右侧滑入，但您可以自己定义，如本论坛帖子所述：https://forum.ionicframework.com/t/adding-custom-transitions-custom-modal-transition/75924/3

在app.module.ts中，导入以下内容：

import { iosTransitionAnimation } from '@ionic/core/dist/collection/utils/transition/ios.transition';

之后，添加如下内容：

imports: [
    ...
    BrowserModule,
    IonicModule.forRoot({
        navAnimation:iosTransitionAnimation
    }),
    ...
],

它在离子4中工作。
也许能帮到别人！

如果使用的是Ionic 6，则可以使用

enterAnimation = (baseEl: HTMLElement) => {
const root = baseEl.shadowRoot;
const backdropAnimation = this.animationCtrl
  .create()
  .addElement(root.querySelector('ion-backdrop')!)
  .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');

  const wrapperAnimation = this.animationCtrl
  .create()
  .addElement(root.querySelector('.modal-wrapper')!)
  .keyframes([
    { offset: 0, opacity: '0', transform: 'translateX(-100%)' },
    { offset: 1, opacity: '0.99', transform: 'translateX(0)' },
  ]);

return this.animationCtrl
  .create()
  .addElement(baseEl)
  .easing('ease-out')
  .duration(500)
  .addAnimation([backdropAnimation, wrapperAnimation]);

 };

  leaveAnimation = (baseEl: HTMLElement) => {
    return this.enterAnimation(baseEl).direction('reverse');
  };