时间戳

首页 > 解决方案 > 更改默认离子模态动画的持续时间

angular - 更改默认离子模态动画的持续时间

问题描述

我有一个页面，里面有一个基本的离子模式。一切正常，但我希望它滑入/滑出的速度比默认情况下要慢。是否可以在不创建自定义动画等的情况下实现它？以某种更简单的方式？无需更改任何其他选项，只需要最简单的方法来编辑现有选项。

与默认模式的唯一区别是我应用了一个 CSS 类：

TS

async openModal() {
  const modal = await this.modalController.create({
    component: PlanBreakdownPage,
    cssClass: 'breakdown-modal-css'
  });
  return await modal.present();
}

CSS

.breakdown-modal-css .modal-wrapper {
  height: 95%;
  top: 5%;
  position: absolute;
  display: block;
}

标签： angularionic-framework

解决方案

第一：你为什么要改变它？Ionic 团队创造了所有的东西来匹配原生的外观。

如果你真的想改变它，你应该看看原来的动画。你可以在这里看到它们：https ://github.com/ionic-team/ionic/tree/master/core/src/components/modal/animations

您可以复制这些并使用自定义持续时间创建自己的动画。在ModalController中创建 Modal 时，您可以使用这些。

推荐阅读