How to animate ionic page/modal to slide in from right

Question

I did some research and what I saw is this:

A cordova plugin to get native page transitions but this is only on mobile. https://ionicframework.com/docs/native/native-page-transitions/

If I want to make this work on mobile app and web what is the best option to follow here?

What I want to do is to slide my page and modal from right to the position of the page/modal.

Is this achievable by just using css animations?

Answer 1

You can adjust the ionic config to achieve this:

import { IonicModule } from 'ionic-angular';

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

see https://ionicframework.com/docs/api/config/Config/ for reference.

For single Page transitions you can use:

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' });
  }

}

Note: There is no built-in modal transition to slide in from the right but you can define it yourself like described in this forum post: https://forum.ionicframework.com/t/adding-custom-transitions-custom-modal-transition/75924/3