如何动画离子 page/modal 从右边滑入

Question

我做了一些研究，我看到的是：

用于获取本机页面转换的 cordova 插件，但这仅适用于移动设备。 https://ionicframework.com/docs/native/native-page-transitions/

如果我想在移动应用程序和 Web 上使用此功能，请遵循此处的最佳选择是什么？

我想做的是将我的页面和模态从右边滑动到 page/modal 的位置。

仅使用 css 动画可以实现吗？

Answer 1

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

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

}

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

Answer 2

在 app.module.ts 中导入：

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

之后，像这样添加：

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

它适用于 Ionic 4。

也许对某人有帮助！

如何动画离子 page/modal 从右边滑入

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

cordova

cordova-plugins

ionic3

angular

angular5