javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(menu): default to overlay for ios menu (#19063)

Browse Source 
resolves #18662
This commit is contained in:
Adam Bradley
2019-10-08 11:59:06 -05:00
committed by Brandy Carney
parent 1b9d61bfa8
commit dbf6a448ff
9 changed files with 29 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
core/src/utils/menu-controller/animations/base.ts
View File

@@ -7,14 +7,13 @@ import { createAnimation } from '../../animation/animation';
* type will provide their own animations for open and close
* and registers itself with Menu.
*/
export const baseAnimation = (): IonicAnimation => {
export const baseAnimation = (isIos: boolean): IonicAnimation => {
// https://material.io/guidelines/motion/movement.html#movement-movement-in-out-of-screen-bounds
// https://material.io/guidelines/motion/duration-easing.html#duration-easing-natural-easing-curves
// "Apply the sharp curve to items temporarily leaving the screen that may return
// from the same exit point. When they return, use the deceleration curve. On mobile,
// this transition typically occurs over 300ms" -- MD Motion Guide
return createAnimation()
.easing('cubic-bezier(0.0, 0.0, 0.2, 1)') // Deceleration curve (Entering the screen)
.duration(300);
return createAnimation().duration(isIos ? 400 : 300);
};

11
core/src/utils/menu-controller/animations/overlay.ts
View File

@@ -11,9 +11,7 @@ import { baseAnimation } from './base';
export const menuOverlayAnimation = (menu: MenuI): IonicAnimation => {
let closedX: string;
let openedX: string;
const BOX_SHADOW_WIDTH = 8;
const width = menu.width + BOX_SHADOW_WIDTH;
const width = menu.width + 8;
const menuAnimation = createAnimation();
const backdropAnimation = createAnimation();
@@ -32,9 +30,12 @@ export const menuOverlayAnimation = (menu: MenuI): IonicAnimation => {
.addElement(menu.menuInnerEl!)
.fromTo('transform', `translateX(${closedX})`, `translateX(${openedX})`);
const isIos = menu.mode === 'ios';
const opacity = isIos ? 0.2 : 0.25;
backdropAnimation
.addElement(menu.backdropEl!)
.fromTo('opacity', 0.01, 0.32);
.fromTo('opacity', 0.01, opacity);
return baseAnimation().addAnimation([menuAnimation, backdropAnimation]);
return baseAnimation(isIos).addAnimation([menuAnimation, backdropAnimation]);
};

2
core/src/utils/menu-controller/animations/push.ts
View File

@@ -35,5 +35,5 @@ export const menuPushAnimation = (menu: MenuI): IonicAnimation => {
.addElement(menu.backdropEl!)
.fromTo('opacity', 0.01, 0.32);
return baseAnimation().addAnimation([menuAnimation, backdropAnimation, contentAnimation]);
return baseAnimation(menu.mode === 'ios').addAnimation([menuAnimation, contentAnimation, backdropAnimation]);
};

2
core/src/utils/menu-controller/animations/reveal.ts
View File

@@ -15,5 +15,5 @@ export const menuRevealAnimation = (menu: MenuI): IonicAnimation => {
.addElement(menu.contentEl!) // REVIEW
.fromTo('transform', 'translateX(0px)', `translateX(${openedX})`);
return baseAnimation().addAnimation(contentOpen);
return baseAnimation(menu.mode === 'ios').addAnimation(contentOpen);
};