如何设置页面/模态的动画以从右侧滑入

您可以调整离子配置来实现这一点:

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中起作用。

也许它能帮助别人!