Ionic framework 离子菜单-寄存器初始化

有没有人有在Ion菜单中进行注册的经验？我尝试将新动画添加到菜单中，如以下文档所述：

我真的不能显示任何代码，因为我还不能使任何东西有价值。

---

任何例子都会有帮助。

我有一个答案给你，尽管差不多一年后。。。希望这能有所帮助

下面是一个“简单”的例子，使用的是爱奥尼亚5.0.0-beta.5（我认为它可以用于以前的版本，但语法可能会有所不同）。假设我想加速默认的“显示”动画。我从

@ionic/core/dist/collection/utils/menu controller/animations/reveal.js

复制了原始动画代码，并将持续时间更改为150ms：

import { AnimationBuilder, createAnimation, MenuI } from '@ionic/core';

export const fastReveal: AnimationBuilder = (menu: MenuI) => {
  const openedX = menu.width * (menu.isEndSide ? -1 : 1);
  const contentOpen = createAnimation()
    .addElement(menu.contentEl as Element)
    .fromTo('transform', 'translateX(0px)', 'translateX(' + openedX + 'px)');
  return createAnimation()
    .duration(150)
    .addAnimation(contentOpen);
};

然后，在

app.component.ts

构造函数中：

menuController.registerAnimation('fast-reveal', fastReveal);

通过从上面的

@ionic/core

导入

menuController

和

fastreave

最后也是最重要的一点是添加CSS类，如果类型为“reveal”，则会自动添加这些类：

<ion-app>
  <ion-menu class="menu-type-reveal" contentId="main-content" type="fast-reveal">
    <ion-header>
      <ion-toolbar>
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
      Hello !
    </ion-content>
  </ion-menu>
  <ion-router-outlet id="main-content" class="menu-content-reveal"></ion-router-outlet>
</ion-app>

菜单
你好