Как анимировать ионную страницу / модал, чтобы скользить справа - PullRequest
Новая
       7

Как анимировать ионную страницу / модал, чтобы скользить справа

0 голосов
/ 31 октября 2018

Я провел небольшое исследование и увидел следующее:

Плагин Cordova для получения собственных переходов страниц, но это только для мобильных устройств. https://ionicframework.com/docs/native/native-page-transitions/

Если я хочу, чтобы это работало в мобильных приложениях и в Интернете, каков наилучший вариант для подражания здесь?

То, что я хочу сделать, - это сдвинуть мою страницу и модал справа от позиции страницы / модал.

Это достижимо, просто используя CSS анимацию?

1 Ответ

0 голосов
/ 31 октября 2018

Вы можете настроить ионный конфиг для достижения этого: 

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

...