javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 14:01:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(menu): improves menu type animations

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2017-10-30 11:44:10 +01:00
parent 9be3085f91
commit 31bb8b8aa8
3 changed files with 20 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
packages/core/src/components/menu/animations/base.ts
View File

@ -1,15 +1,25 @@
import { Animation } from '../../../index';
/**
* @hidden
* Menu Type
* baseAnimation
* Base class which is extended by the various types. Each
* type will provide their own animations for open and close
* and registers itself with Menu.
*/
export default function baseAnimation(Animation: Animation): Animation {
// 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
/** TODO replace duration(280ms)
* - Mobile entering time: 225ms
* - Mobile leaving time: 195ms
*
* - Tablet time = Mobile time * 1.3 (+30%)
* - Tablet entering time: 292.5
* - Tablet leaving time: 253.5
*/
return new Animation()
.easing('cubic-bezier(0.0, 0.0, 0.2, 1)')
.easingReverse('cubic-bezier(0.4, 0.0, 0.6, 1)')
.easing('cubic-bezier(0.0, 0.0, 0.2, 1)') // Deceleration curve (Entering the screen)
.easingReverse('cubic-bezier(0.4, 0.0, 0.6, 1)') // Sharp curve (Temporarily leaving the screen)
.duration(280);
}

7
packages/core/src/components/menu/animations/overlay.ts
View File

@ -1,6 +1,7 @@
import { Animation, Menu } from '../../../index';
import baseAnimation from './base';
const BOX_SHADOW_WIDTH = 8;
/**
* @hidden
* Menu Overlay Type
@ -9,15 +10,15 @@ import baseAnimation from './base';
*/
export default function(Animation: Animation, _: HTMLElement, menu: Menu): Animation {
let closedX: string, openedX: string;
const width = menu.width;
const width = menu.width + BOX_SHADOW_WIDTH;
if (menu.isRightSide) {
// right side
closedX = 8 + width + 'px';
closedX = width + 'px';
openedX = '0px';
} else {
// left side
closedX = -(8 + width) + 'px';
closedX = -width + 'px';
openedX = '0px';
}

6
packages/core/src/components/menu/animations/push.ts
View File

@ -9,22 +9,20 @@ import baseAnimation from './base';
*/
export default function(Animation: Animation, _: HTMLElement, menu: Menu): Animation {
let contentOpenedX: string, menuClosedX: string, menuOpenedX: string;
let contentOpenedX: string, menuClosedX: string;
const width = menu.width;
if (menu.isRightSide) {
contentOpenedX = -width + 'px';
menuClosedX = width + 'px';
menuOpenedX = '0px';
} else {
contentOpenedX = width + 'px';
menuOpenedX = '0px';
menuClosedX = -width + 'px';
}
const menuAni = new Animation()
.addElement(menu.menuInnerEl)
.fromTo('translateX', menuClosedX, menuOpenedX);
.fromTo('translateX', menuClosedX, '0px');
const contentAni = new Animation()
.addElement(menu.contentEl)