Question

有人在离子菜单中对registerAnimation有经验吗？我尝试将新动画添加到菜单中，如文档在此处说明：https://github.com/ionic-team/ionic/tree/3c9ed3166d3a11a4172b5875784c0321311cfd82/core/src/components/menu-controller

我真的无法显示任何代码，因为我还没有任何值得的东西。任何示例都将有所帮助。

Answer 1

尽管有将近一年的时间，但我希望能为您提供答案。希望它能对您有所帮助。

这是一个使用 Ionic 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);

通过从上方的menuController和@ionic/core导入fastReveal。

最后也是最重要的一点是添加 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>

离子菜单-registerAnimation

1 个答案: