How to customize side menu animation - ionic-framework

Question

I´m developing an Ionic 4 aplication and I want to usea a custom side menu animation like this:
but Ionic only have 3 options: push, overlay and reveal.
I already have my 3dmenu.ts file but I don´t no how to inject it to use It with the Ion-menu componet like the other 3 options, could some one give a hint about how to do this?

Answer 1

I finally can do it, Using workaruond than I found here here. The trick is extend the menu controller class to create a new method registerAnimation:
Step 1: Create a new ts file (extended.ts or the name than you want) and put this code inside:
import { DOCUMENT } from '#angular/common';
import { Inject, Injectable } from '#angular/core';
import { MenuController } from '#ionic/angular';
import { AnimationBuilder } from '#ionic/core';
function proxyMethod(ctrlName: string, doc: Document, methodName: string, ...args: any[]) {
const controller = ensureElementInBody(ctrlName, doc);
return controller.componentOnReady()
.then(() => (controller as any)[methodName].apply(controller, args));
}
function ensureElementInBody(elementName: string, doc: Document) {
let element = doc.querySelector(elementName);
if (!element) {
element = doc.createElement(elementName);
doc.body.appendChild(element);
}
return element as HTMLStencilElement;
}
const CTRL = 'ion-menu-controller';
#Injectable({
providedIn: 'root',
})
export class EloMenuController extends MenuController {
constructor(#Inject(DOCUMENT) private document: any) {
super(document)
}
/**
* Registers a new animation that can be used with any `ion-menu` by
* passing the name of the animation in its `type` property.
*
* #param name The name of the animation to register.
* #param animation The animation function to register.
*/
registerAnimation(name: string, animation: AnimationBuilder) {
return proxyMethod(CTRL, this.document, 'registerAnimation', name, animation);
}
}
Step 2: Create a new ts file with the animation, in my case I use this:
import { Animation, MenuI } from '#ionic/core';
export function menu3D (AnimationC: Animation, baseEl: HTMLElement, menu: MenuI):
Promise<Animation> {
let contentOpenedX: string;
let menuClosedX: string;
const width = menu.width;
const baseAnimation = new AnimationC();
if (menu.isEndSide) {
contentOpenedX = -width + 'px';
menuClosedX = width + 'px';
}
else {
contentOpenedX = width + 'px';
menuClosedX = -width + 'px';
}
const menuAnimation = new AnimationC()
.addElement(menu.menuInnerEl)
.fromTo('z-index', '0', '0')
.fromTo('translateX', menuClosedX, '0px');
const contentAnimation = new AnimationC()
.addElement(menu.contentEl)
.fromTo('translateX', '0px', contentOpenedX)
.fromTo('scale', '1', '0.7');
const backdropAnimation = new AnimationC()
.addElement(menu.backdropEl)
.fromTo('opacity', 0.01, 0.32);
return Promise.resolve(baseAnimation
.addElement(baseEl)
.easing('cubic-bezier(0.0, 0.0, 0.2, 1)')
.easingReverse('cubic-bezier(0.4, 0.0, 0.6, 1)')
.duration(300)
.add(contentAnimation)
.add(menuAnimation)
.add(backdropAnimation));
};
Step 3: import in your app.component.ts the extended class and the animation and register your animation to be able to use it:
import { Component, OnInit, Input } from '#angular/core';
import { Extend } from './animations/extend
import { menu3D } from './animations/menu3D';
#Component({
selector: 'app-root',
templateUrl: 'app.component.html',
})
export class AppComponent implements OnInit {
#Input() name: string;
constructor(
private menu: Extend
) {
this.menu.registerAnimation('menu3d', menu3D);
}
ngOnInit() {}
}
Step 4: configure the type to your ion-menu component
<ion-menu side="start" type="menu3d" style="z-index: 10;">
........
</ion-menu>
Step 5: Don't forget to thanks to svallory from github and Enjoy it :-)
I don´t konw if it this the best way to do it but its the only way than I found after 5 days searching, I hope this helps other and if anyone can improve this feel free to comment :-)