javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 21:48:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(menu): update menu animation and design for iOS11

Browse Source
This commit is contained in:
Brandy Carney
2017-11-16 14:49:27 -06:00
parent 62f03490e5
commit b493c819dd
3 changed files with 34 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/core/src/components/menu-controller/animations/overlay.ts
View File

@ -26,11 +26,11 @@ export default function(Animation: Animation, _: HTMLElement, menu: Menu): Anima
.addElement(menu.menuInnerEl) .addElement(menu.menuInnerEl)
.fromTo('translateX', closedX, openedX); .fromTo('translateX', closedX, openedX);
const backdropApi = new Animation() const backdropAni = new Animation()
.addElement(menu.backdropEl) .addElement(menu.backdropEl)
.fromTo('opacity', 0.01, 0.35); .fromTo('opacity', 0.01, 0.3);
return baseAnimation(Animation) return baseAnimation(Animation)
.add(menuAni) .add(menuAni)
.add(backdropApi); .add(backdropAni);
} }

5
packages/core/src/components/menu-controller/animations/push.ts
View File

@ -28,7 +28,12 @@ export default function(Animation: Animation, _: HTMLElement, menu: Menu): Anima
.addElement(menu.contentEl) .addElement(menu.contentEl)
.fromTo('translateX', '0px', contentOpenedX); .fromTo('translateX', '0px', contentOpenedX);
const backdropAni = new Animation()
.addElement(menu.backdropEl)
.fromTo('opacity', 0.01, 0.2);
return baseAnimation(Animation) return baseAnimation(Animation)
.add(menuAni) .add(menuAni)
.add(backdropAni)
.add(contentAni); .add(contentAni);
} }

32
packages/core/src/components/menu/menu.ios.scss
View File

@ -9,27 +9,47 @@
$menu-ios-background: $background-ios-color !default; $menu-ios-background: $background-ios-color !default;
/// @prop - Box shadow color of the menu /// @prop - Box shadow color of the menu
$menu-ios-box-shadow-color: rgba(0, 0, 0, .25) !default; $menu-ios-box-shadow-color: rgba(0, 0, 0, .08) !default;
/// @prop - Box shadow of the menu /// @prop - Box shadow of the menu
$menu-ios-box-shadow: 0 0 10px $menu-ios-box-shadow-color !default; $menu-ios-box-shadow: -8px 0px 42px $menu-ios-box-shadow-color !default;
/// @prop - Box shadow of the reveal menu
$menu-ios-box-shadow-reveal: $menu-ios-box-shadow !default;
/// @prop - Box shadow of the push menu
$menu-ios-box-shadow-push: null !default;
/// @prop - Box shadow of the overlay menu
$menu-ios-box-shadow-overlay: null !default;
.menu-ios .menu-inner { .menu-ios .menu-inner {
background: $menu-ios-background; background: $menu-ios-background;
} }
.menu-ios.menu-type-overlay .menu-inner { .app-ios .menu-type-overlay .menu-inner {
box-shadow: $menu-ios-box-shadow; box-shadow: $menu-ios-box-shadow-overlay;
} }
// iOS Menu Content // iOS Menu Content
// -------------------------------------------------- // --------------------------------------------------
.app-ios .menu-content-reveal { .app-ios .menu-content-reveal {
box-shadow: $menu-ios-box-shadow; box-shadow: $menu-ios-box-shadow-reveal;
} }
.app-ios .menu-content-push { .app-ios .menu-content-push {
box-shadow: $menu-ios-box-shadow; box-shadow: $menu-ios-box-shadow-push;
} }
// iOS Menu Push
// --------------------------------------------------
.app-ios .menu-type-push {
z-index: $z-index-menu-overlay;
}
.app-ios .menu-type-push .show-backdrop {
display: block;
}