javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 22:17:40 +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'; import { Animation } from '../../../index';
/** /**
* @hidden * baseAnimation
* Menu Type
* Base class which is extended by the various types. Each * Base class which is extended by the various types. Each
* type will provide their own animations for open and close * type will provide their own animations for open and close
* and registers itself with Menu. * and registers itself with Menu.
*/ */
export default function baseAnimation(Animation: Animation): Animation { 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() return new Animation()
.easing('cubic-bezier(0.0, 0.0, 0.2, 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)') .easingReverse('cubic-bezier(0.4, 0.0, 0.6, 1)') // Sharp curve (Temporarily leaving the screen)
.duration(280); .duration(280);
} }

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

@ -1,6 +1,7 @@
import { Animation, Menu } from '../../../index'; import { Animation, Menu } from '../../../index';
import baseAnimation from './base'; import baseAnimation from './base';
const BOX_SHADOW_WIDTH = 8;
/** /**
* @hidden * @hidden
* Menu Overlay Type * Menu Overlay Type
@ -9,15 +10,15 @@ import baseAnimation from './base';
*/ */
export default function(Animation: Animation, _: HTMLElement, menu: Menu): Animation { export default function(Animation: Animation, _: HTMLElement, menu: Menu): Animation {
let closedX: string, openedX: string; let closedX: string, openedX: string;
const width = menu.width; const width = menu.width + BOX_SHADOW_WIDTH;
if (menu.isRightSide) { if (menu.isRightSide) {
// right side // right side
closedX = 8 + width + 'px'; closedX = width + 'px';
openedX = '0px'; openedX = '0px';
} else { } else {
// left side // left side
closedX = -(8 + width) + 'px'; closedX = -width + 'px';
openedX = '0px'; 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 { 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; const width = menu.width;
if (menu.isRightSide) { if (menu.isRightSide) {
contentOpenedX = -width + 'px'; contentOpenedX = -width + 'px';
menuClosedX = width + 'px'; menuClosedX = width + 'px';
menuOpenedX = '0px';
} else { } else {
contentOpenedX = width + 'px'; contentOpenedX = width + 'px';
menuOpenedX = '0px';
menuClosedX = -width + 'px'; menuClosedX = -width + 'px';
} }
const menuAni = new Animation() const menuAni = new Animation()
.addElement(menu.menuInnerEl) .addElement(menu.menuInnerEl)
.fromTo('translateX', menuClosedX, menuOpenedX); .fromTo('translateX', menuClosedX, '0px');
const contentAni = new Animation() const contentAni = new Animation()
.addElement(menu.contentEl) .addElement(menu.contentEl)